Webpack 优化：你的构建速度其实还能快10倍

让Webpack构建速度提升10倍并非天方夜谭，这需要你从构建过程分析、缓存策略、多进程处理、模块解析和现代化工具替代等多个维度进行深度优化。下面是一份详尽的优化指南，其中包含具体的配置示例和原理剖析。

⚙️ 分析构建速度与输出

优化前，先定位瓶颈。

1. 使用 speed-measure-webpack-plugin 分析打包耗时

这个插件能分析 webpack 的总打包耗时以及每个 plugin 和 loader 的打包耗时，从而让我们对打包时间较长的部分进行针对性优化。

bash 复制代码

yarn add speed-measure-webpack-plugin -D

配置示例：

javascript 复制代码

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

module.exports = smp.wrap({
  // 你的webpack配置
});

2. 使用 webpack-bundle-analyzer 分析产物

这是一个强大的可视化工具，帮助你理解输出包的组成，识别体积大的模块，进而进行优化。

bash 复制代码

yarn add webpack-bundle-analyzer -D

配置示例：

javascript 复制代码

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
};

💾 善用缓存

缓存是提升二次构建速度最有效的方式之一。

1. Webpack 5 持久化缓存

Webpack 5 引入了持久化缓存功能，可以将构建结果缓存到文件系统，从而加快二次构建的速度。

javascript 复制代码

module.exports = {
  cache: {
    type: 'filesystem', // 使用文件系统缓存
    allowCollectingMemory: true, // 允许在内存中收集缓存数据，这在某些情况下可以提高性能
    name: `${process.env.NODE_ENV || 'development'}-cache`, // 缓存名称，可根据环境区分
  },
};

2. Babel 缓存

对于使用 Babel 转译的项目，配置 cacheDirectory 可以显著提升二次转译速度。

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {
          loader: 'babel-loader',
          options: {
            cacheDirectory: true, // 启用 babel-loader 缓存
          },
        },
        exclude: /node_modules/, // 排除 node_modules，减少处理范围
      },
    ],
  },
};

⚡️ 多进程/多线程并行处理

将耗时的任务并行化。

1. Thread-loader

thread-loader 可以将后续的 loader 放在 worker 池中运行，实现多进程打包。

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: require('os').cpus().length - 1, // 设置 worker 数量，通常为 CPU 核心数减一
            },
          },
          'babel-loader',
        ],
        exclude: /node_modules/,
      },
    ],
  },
};

2. 并行压缩 JavaScript

使用 TerserWebpackPlugin 并开启并行模式，可以显著加快代码压缩速度。

javascript 复制代码

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: true, // 启用多进程并行运行
        // 默认的并发运行数量： os.cpus().length - 1
      }),
    ],
  },
};

关于 HappyPack 的说明 ： HappyPack 是早期实现多进程打包的方案。但有迹象表明，在一些新版本的 loader (如 babel-loader 8+) 中，HappyPack 反而可能降低性能。因此，更推荐使用 thread-loader。

🔍 缩小构建范围

减少 Webpack 需要处理的文件数量和搜索范围。

1. 缩小 Loader 处理范围

通过 test、include、exclude 精确控制 loader 的应用范围。

javascript 复制代码

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        include: path.resolve(__dirname, 'src'), // 只处理 src 目录下的文件
        exclude: /node_modules/, // 排除 node_modules
      },
    ],
  },
};

2. 优化 resolve.modules 配置

resolve.modules 告诉 Webpack 解析模块时应该搜索的目录。默认值 ['node_modules'] 会向上递归查找，可以将其设置为绝对路径以减少搜索范围。

javascript 复制代码

module.exports = {
  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'), // 优先在项目 node_modules 中查找
      // 'node_modules' // 必要时再向上查找
    ],
  },
};

3. 合理配置 resolve.extensions

javascript 复制代码

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.json'], // 频率高的后缀放前面，减少尝试次数
  },
};

4. 使用 externals

对于一些大型第三方库，可以通过 externals 配置不打包这些库，而是通过 CDN 引入。

javascript 复制代码

module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};

然后在你的 HTML 模板中通过 <script> 标签引入 CDN 资源。

🗜️ 优化代码与拆分

1. Tree Shaking

Tree Shaking 用于移除 JavaScript 上下文中的未引用代码，依赖于 ES6 模块语法。

确保你的代码使用 ES6 模块（import 和 export）。
在 package.json 中添加 "sideEffects": false 告诉 Webpack 所有文件都是无副作用的，或者提供一个数组列出有副作用的文件。

2. 代码分割 (Code Splitting)

使用 Webpack 的 splitChunks 功能将公共代码和第三方库提取到单独的 chunk。

javascript 复制代码

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all', // 对所有类型的 chunk 进行分割
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/, // 将 node_modules 中的第三方库提取出来
          name: 'vendors',
          chunks: 'all',
        },
        common: {
          name: 'common',
          minChunks: 2, // 至少被两个 chunk 引用的模块
          chunks: 'all',
          enforce: true,
        },
      },
    },
  },
};

3. 动态导入 (Dynamic Import)

使用 import() 语法实现按需加载。

javascript 复制代码

// 静态导入
// import { add } from './math';

// 动态导入
document.getElementById('calculate').addEventListener('click', async () => {
  const math = await import('./math');
  console.log(math.add(16, 26));
});

🚀 探索更快的构建工具

如果你的项目构建依然缓慢，可以考虑下一代构建工具。

Rspack

Rspack 是一个基于 Rust 的高性能构建工具，其配置与 Webpack 非常相似，迁移成本相对较低。

优势：
- 极快的启动和构建速度：一个实际案例显示，迁移到 Rspack 后，构建时间从 300 秒减少到约 80 秒，减少了 80%。
- Webpack 生态兼容：支持大多数 Webpack 的 loaders 和 plugins。
- 内置 SWC 支持：使用 SWC (一个基于 Rust 的 JavaScript/TypeScript 编译器) 替代 Babel，转换速度更快。
迁移考量：
- Rspack 与 Webpack 配置高度相似，允许渐进式迁移。
- 需要注意一些潜在问题，例如动态导入在某些情况下可能需要调整。

📊 优化效果预估

下表总结了不同优化手段可能带来的预期效果（因项目而异）：

优化手段	预期效果 (构建速度提升)	适用场景
持久化缓存 (Webpack 5)	二次构建提升 5-10 倍	所有项目，特别是大型项目
多进程/并行处理	提升 30% - 60%	CPU 密集型任务 (Babel, Terser)
缩小构建范围	提升 10% - 30%	文件数量多，依赖复杂的项目
代码分割与 Tree Shaking	减小体积，优化运行性能	所有生产环境构建
迁移到 Rspack	提升 50% - 80%+	对构建速度有极致要求的项目

💎 优化总结

要实现 Webpack 构建速度的极致提升，你需要：

精准分析 ：使用 speed-measure-webpack-plugin 和 webpack-bundle-analyzer 找到瓶颈。
善用缓存 ：Webpack 5 的 filesystem 缓存和 loader 自带的缓存是提升二次构建速度的利器。
并行处理 ：对 CPU 密集型任务（如转译、压缩）使用 thread-loader 和 TerserPlugin 的并行功能。
缩小范围 ：通过 include/exclude 和 resolve 配置，减少不必要的文件处理和模块解析。
代码优化 ：利用 splitChunks 和 Tree Shaking 减少最终产物体积。
考虑替代方案 ：如果经过上述优化仍不满足需求，可以考虑像 Rspack 这样性能更卓越的构建工具。

希望这份详尽的指南能帮助你显著提升 Webpack 的构建速度。如果你在优化过程中遇到具体问题，欢迎随时提出。