Webpack5 构建速度太慢怎么优化？

Webpack5 构建慢这个问题确实挺烦的，我来说几个能明显提速的方案。

用 esbuild-loader 替换 babel-loader 和 thread-loader

这是最有效的方案，esbuild 是用 Go 写的，编译速度比 babel 快几十倍。你只需要把 loader 改了就行：

// webpack.config.js

module.exports = {

  module: {

    rules: [

      {

        test: /.js$/,

        exclude: /node_modules/,

        use: {

          loader: 'esbuild-loader',

          options: {

            target: 'es2015'

          }

        }

      },

      {

        test: /.tsx?$/,

        use: 'esbuild-loader',

        exclude: /node_modules/,

      }

    ]

  },

  // 优化 terser

  optimization: {

    minimizer: [

      new EsbuildPlugin({

        target: 'es2015',

        css: true

      })

    ]

  }

};

装一下依赖：npm install esbuild-loader esbuild

再检查一下你的 cache 配置

确保缓存正确开启，有些情况需要加一下 version 来强制刷新：

cache: {

  type: 'filesystem',

  buildDependencies: {

    config: [__filename] // 当 webpack.config.js 变化时清除缓存

  }

}

开发环境把 devtool 改一下

用 eval-cheap-module-source-map 就行，别用 source-map 那种重的：

devtool: 'eval-cheap-module-source-map'

resolve 优化也能省不少时间

resolve: {

  extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],

  // 尽量少用通配符

  symlinks: false,

  // 如果用 yarn 的PnP可以开启

  pnpApi: 'pnpify'

}

关于热更新慢

如果项目比较大，可以考虑用 webpack-dev-server 的 hot: 'only' 模式，或者干脆换 Vite 开发体验会好很多——不过这要看你们项目能不能迁移。

核心就是 esbuild-loader 这一步，换上去通常能快个十几二十秒。你先试试，有问题再聊。

Webpack5构建慢这个老问题我也被坑过多次。除了cache和thread-loader，还有几个关键优化点可以试试：

第一，把devtool改成'eval-cheap-module-source-map'，这比source-map快很多，虽然sourcemap质量差点但开发环境够用了。

第二，检查loader的exclude配置，比如babel-loader一定要排除node_modules：

{

  test: /.js$/,

  exclude: /node_modules/,

  loader: 'babel-loader'

}

第三，升级到最新版Webpack5，他们一直在优化构建性能。我之前一个项目从5.28升到5.76，构建时间直接少了20%。

第四，如果用了TypeScript，试试swc-loader替代babel-loader，速度起飞。不过要注意浏览器兼容问题。

第五，hard-source-webpack-plugin可以配合filesystem cache用，有奇效。配置大概这样：

new HardSourceWebpackPlugin({

  environmentHash: {

    root: process.cwd(),

    directories: [],

    files: ['package-lock.json', 'yarn.lock']

  }

})

最后，如果项目特别大，考虑用vite临时顶一下...别打我，这招真的管用，虽然不算正经优化方案。