Webpack 如何优化构建速度？

Question

Webpack 如何优化构建速度？

仓乃文 · Accepted Answer

Webpack 构建速度优化从缩小搜索范围、利用缓存、多线程并行三个方向入手。

缩小搜索范围：
```javascript
// webpack.config.js
module.exports = {
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],  // 减少后缀尝试
    alias: {
      "@": path.resolve(__dirname, "src"),  // 绝对路径，减少查找
    },
    modules: [path.resolve(__dirname, "node_modules")],  // 限定查找目录
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        include: path.resolve(__dirname, "src"),  // 只处理 src 目录
        exclude: /node_modules/,
        use: "babel-loader",
      },
    ],
  },
};
```

利用缓存：
```javascript
module.exports = {
  cache: {
    type: "filesystem",  // Webpack 5 持久化缓存，二次构建大幅提速
  },
};
```

多线程并行（thread-loader / esbuild-loader）：
```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          "thread-loader",  // 放在其他 loader 之前
          "babel-loader",
        ],
      },
    ],
  },
};
```

补充说明：
- Webpack 5 的 filesystem 缓存效果显著，二次构建可快 80%+
- include/exclude 同时使用时 include 优先级更高
- thread-loader 有进程通信开销，小项目反而更慢
- 考虑用 esbuild-loader 替代 babel-loader，速度提升 10-100 倍