如何提高 webpack 的构建速度

1、升级Webpack版本： 确保使用的是最新版本的Webpack，因为每个新版本都可能包含一些性能优化。

2、使用DllPlugin： 使用DllPlugin和DllReferencePlugin来将第三方库的代码预先打包，以减少构建时间。这样就可以将这些库的代码从主要的构建中分离出来，并在它们没有发生变化时不需要重新构建。

3、使用缓存： 启用Webpack的缓存，以便在后续构建中重复使用之前的结果。你可以通过在配置文件中添加cache: true来启用缓存。

module.exports = {
  // ...
  cache: true,
};

4、多进程/多实例构建： 使用工具如thread-loader或happypack将构建任务分发到多个子进程中，以利用多核处理器的优势。

5、只加载必要的资源： 确保只加载项目实际需要的资源。使用Webpack的tree shaking功能来消除未使用的代码。

6、减小文件搜索范围： 在Webpack配置中指定resolve的modules和extensions，以减小Webpack在文件系统中搜索文件的范围。

resolve: {
  modules: ['node_modules'],
  extensions: ['.js', '.jsx', '.json'],
},

7、使用高效的loader： 选择性能较好的loader，避免使用过于耗时的loader。如果可能，考虑使用babel-loader的cacheDirectory选项来缓存Babel的编译结果。

{
  loader: 'babel-loader',
  options: {
    cacheDirectory: true,
  },
}

8、优化图片： 使用像image-webpack-loader这样的loader来优化图像文件，以减小文件大小。

9、Webpack性能分析： 使用Webpack Bundle Analyzer等工具来分析你的构建输出，找出体积较大的模块，以便进一步优化。

10、使用更轻量的插件： 可以考虑使用一些轻量级的Webpack插件，避免引入过多的不必要的功能。

11、合理使用source map： 在开发环境中使用较轻量的source map，例如cheap-module-eval-source-map，在生产环境中禁用或使用更轻量的source map。

12、Webpack Parallel Build： 使用工具如webpack-parallel-uglify-plugin来并行地压缩和优化代码。