Webpack是否并行构建多入口文件？如何优化构建耗时？

多入口的并行构建逻辑 #

Webpack 4及之后的版本，默认会启动内部的多线程机制处理部分构建任务，但不是完全并行编译所有入口文件。它会先解析所有入口的依赖树，把可并行的任务（比如模块转译、代码压缩）分配到worker线程执行，但入口之间的依赖解析环节可能存在串行逻辑，尤其是多个入口共享大量公共依赖时，Webpack会先完成公共依赖的编译再处理各个入口。

如果你的项目构建耗时还是很长，说明默认的并行力度不够，得针对性优化。

实用的构建速度优化手段 #

• 强制开启多线程编译：给耗时的loader（比如babel-loader、ts-loader）加上thread-loader，把转译任务放到线程池里，不让主线程卡着。配置示例：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.js$/,
          use: ['thread-loader', 'babel-loader'],
          exclude: /node_modules/
        }
      ]
    }
  };
  

• 开磁盘缓存：配置cache: { type: 'filesystem' }，把编译结果存到磁盘里，下次构建直接用缓存，省掉重复编译的时间。
• 优化代码压缩：用terser-webpack-plugin并开启多线程，比默认压缩工具快很多：

  const TerserPlugin = require('terser-webpack-plugin');
  module.exports = {
    optimization: {
      minimizer: [new TerserPlugin({ parallel: true })]
    }
  };
  

• 缩小构建范围：用include/exclude精准指定loader要处理的文件，别让它遍历node_modules；设置resolve.modules指定依赖查找路径，减少文件搜索的时间。
• 换更快的转译工具：比如用swc-loader代替babel-loader，SWC是Rust写的，转译速度比Babel快好几倍。
• 拆分公共代码：通过optimization.splitChunks把多个入口的公共依赖提出来，避免重复编译相同模块，还能减小打包体积。
• 删掉没用的插件：检查配置里的插件，把当前构建环境不需要的（比如生产环境的热更新插件）删掉，减少不必要的开销。

内容的提问来源于stack exchange，提问作者shawnnyglum