Bundler——它是什么、有哪些类型及工作原理

什么是 Bundler？

Bundler（模块打包器）——一种命令行工具，接收入口点（entry point）——应用程序的主文件——并递归遍历其所有依赖项，构建模块图。在输出端，打包工具生成一个或多个文件，可以连接到 HTML 页面或在移动应用程序中运行。

为什么现代开发需要打包工具

浏览器长期以来在平台层面不支持模块化的 JavaScript 系统。Bundler 解决了这个问题，将数百个 import 和 require 转换为一个文件。如今，即使浏览器原生支持 ES 模块，打包工具仍执行额外的任务：转译 JSX 和 TypeScript、压缩代码、用于懒加载的 代码拆分 以及用于加速开发的 热模块替换（HMR）。

在移动应用开发中，React Native 使用 Metro 作为默认打包工具，而 Flutter 使用基于 Dart 的自身构建系统。打包工具的选择直接影响开发速度、应用程序体积和运行时性能。

打包如何工作？

打包经历几个阶段：解析输入文件、构建依赖图、转换模块和生成输出文件。在每个阶段，打包工具都会应用加载器来转换源代码，并应用插件进行优化。

解析阶段和依赖图

打包工具从入口点开始，读取文件并构建 AST（抽象语法树）。从 AST 中提取所有 import 和 require 语句。对于每个找到的 import，打包工具递归地重复该过程，直到所有依赖项都被收集到一个单一的图中。

// 打包工具的简化实现
const fs = require('fs');
const path = require('path');

function buildGraph(entry) {
  const content = fs.readFileSync(entry, 'utf-8');
  const imports = content.match(/require\(['"](.+?)['"]\)/g);
  const modulePath = path.resolve(path.dirname(entry), imports[0]);
  return { entry, content, deps: [buildGraph(modulePath)] };
}

构建图之后，打包工具应用 加载器——将文件转换为 JavaScript 的转换器：TypeScript → JS、SCSS → CSS、JSX → JSX 函数。然后 插件 执行额外的转换：压缩、图片内联、生成 service worker。

打包工具的主要类型

打包工具分为三代：经典型、专业型和基于 ES 模块的新一代。每种类型都有其自身的架构和应用领域。

经典打包工具

Webpack——最普遍的打包工具，拥有庞大的生态系统。其主要优势是灵活性：数千个加载器和插件几乎覆盖了所有构建场景。Parcel 提供零配置方法，根据文件扩展名自动确定所需的转换。这两种打包工具都支持代码拆分和 HMR。

专业打包工具

Metro 是专门为 React Native 创建的，仅适用于 JavaScript 和 TypeScript。其架构针对移动开发进行了优化：支持 inline requires、异步加载模块以及与 Hermes 引擎的集成。Rollup 面向库和 npm 包，生成干净的 ES 模块输出，无需多余的包装。

Webpack、Metro 和 Vite 的比较

打包工具的选择取决于平台和项目需求。Webpack 是通用的，但需要详细配置。Metro 对于 React Native 来说是不可替代的。Vite 凭借原生 ES 模块提供了最快的开发体验。

Vite 使用 esbuild 进行依赖的预打包，使用 Rollup 进行生产构建，与 Webpack 的开发模式相比，速度提升了 5–10 倍。Metro 不支持 Web 目标，但提供与 React Native bridge 和 Turbo Modules 的无缝集成。

项目中的打包工具配置

配置决定了如何处理不同类型的文件、构建输出位置以及应用哪些优化。典型的配置文件包括入口点、模块规则、插件和输出设置。

React Native Web 项目的 Webpack 配置示例

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: { loader: 'babel-loader', options: { presets: ['@babel/preset-react'] } },
      },
      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
    ],
  },
  plugins: [new HtmlWebpackPlugin({ template: './public/index.html' })],
  devServer: { port: 3000, hot: true },
};

Metro 使用独立的 metro.config.js 和 babel.config.js 文件进行配置。与 Webpack 不同，Metro 的配置要简单得多，因为打包工具专用于 React Native，不需要为样式或图片配置加载器。

构建中的常见错误

即使是有经验的开发人员也会遇到打包错误。Duplicate module——最常见的问题之一，当同一依赖项因 package.json 中的版本不兼容而多次进入包中时发生。Module not found 在导入路径不正确或包未安装时出现。

Metro 特有的错误

Metro 受到移动设备包大小的限制。当超过 2–5 MB 的限制时，由于设备内存不足，会出现 Unable to resolve module 错误。解决方案——使用 inline requires 和 RAM bundles 进行模块的懒加载。Metro 也对符号链接敏感，因此对于单体仓库，需要在配置中额外设置 watchFolders。

对于 Webpack，典型的问题是 Module parse failed，当文件格式不符合预期或缺少必要的加载器时发生。检查文件扩展名并在 module.rules 中添加相应的规则可以解决问题。使用 source-map-explorer 有助于找到最终包中的重复模块和冗余依赖项。

优化配置以加速构建

构建缓慢——使用打包工具时的主要问题之一。为了加速，使用 持久缓存（persistent caching），它在运行之间保存模块转换的结果。Webpack 5 通过 cache: { type: 'filesystem' } 支持文件系统缓存，Vite 使用 esbuild 进行预打包，Metro 依赖 RAM 中的模块缓存。此外，在加载器中为 node_modules 设置 exclude，以避免重复处理已准备好的包。

选择代码拆分策略

代码拆分——将包分割成按需加载的部分。不同的打包工具以不同的方式实现这一策略。Webpack 支持动态导入 import()，为每个模块创建独立的部分。Metro 使用 inline requires 进行延迟加载。Vite 无需额外配置即可自动分割 vendor 块和动态导入。策略的选择取决于项目需求：对于移动应用，更倾向于较小的初始包配合懒加载。

要使 代码拆分 在 React Native 中正常工作，需要额外配置：Metro 必须通过 inlineRequires 配置为处理异步块。在 Webpack 和 Vite 中，当使用动态导入语法 import() 时，代码拆分开箱即用，它会自动创建分割点。为了获得最大效率，将代码拆分与通过 <link rel="preload"> 为关键块添加预加载提示相结合。