Webpack 并行构建真的能提升速度吗？怎么配置才有效？

你配置方式确实有问题，babe-loader 根本不认识 parallel 这个选项，那个是 thread-loader 的配置项。

thread-loader 得配合 babel-loader 一起用才能生效，正确的姿势是把 babel-loader 放到 thread-loader 下面，像这样：

module.exports = {

  module: {

    rules: [

      {

        test: /.js$/,

        exclude: /node_modules/,

        use: [

          {

            loader: 'thread-loader',

            options: {

              workers: require('os').cpus().length - 1,

              poolTimeout: Infinity

            }

          },

          {

            loader: 'babel-loader',

            options: {

              cacheDirectory: true

            }

          }

        ]

      }

    ]

  }

}

几个关键点：

thread-loader 会把 babel 的转译工作分到子进程去跑，但它本身有开销。如果你项目本身不大，或者 node_modules 里的文件太多，worker 启动和通信的开销反而会拖慢速度。

另外，thread-loader 只对耗时的 loader 生效，css-loader、style-loader 这类放进去基本没用。

还有个坑：babel-loader 的 cacheDirectory 一定要开，这个配合 thread-loader 才有明显效果。

如果还是觉得慢，可以试试 esbuild-loader，原理类似但用的是 Go 编译，速度比 thread-loader 更快。不过这个是另一套方案了，你先用上面这个配置试试看。

确实可以提升速度，但得看项目规模和使用方式。我踩过坑，分享几个关键点：

首先检查你的CPU核心数，用 os.cpus().length 就能看到。并行不是越多越好，超过物理核心数反而会变慢，建议设为核心数的75%左右。

配置应该是这样的（webpack 5）：

module.exports = {

  // ...其他配置

  optimization: {

    minimize: true,

    minimizer: [

      new TerserPlugin({

        parallel: true,  // 这才是webpack5推荐的方式

        // 记得设置合理的maxWorkers

      })

    ]

  },

  module: {

    rules: [

      {

        test: /.js$/,

        use: [

          {

            loader: 'thread-loader',

            options: {

              workers: require('os').cpus().length - 1,

              workerParallelJobs: 50,

              // ...其他thread-loader配置

            }

          },

          'babel-loader'

        ]

      }

    ]

  }

}

安全提醒：并行构建会增加内存占用，大项目要特别注意OOM问题。遇到过build机器内存爆掉的情况，建议先在小规模项目上测试。

另外几个提速技巧：
1. 确保node版本够新，老版本v8引擎对多线程支持不好
2. 如果用了cache-loader，要放thread-loader前面
3. 大型项目配合hard-source-webpack-plugin效果更好

吐槽下，webpack这配置真的越来越复杂了，有时候调优比写业务代码还费时间...