不容错过的 webpack5 速度优化指南

10 个提升 Webpack 5 构建速度的诀窍

作为一名经验丰富的工程师，我深知构建和打包代码对于提高开发效率至关重要。然而，随着项目变得越来越庞大，构建速度却成了瓶颈。为了应对这一挑战，我探索了 Webpack 5 的优化技巧，并总结出了 10 个行之有效的策略，助你提升构建效率。

1. 利用持久化缓存

Webpack 5 引入了持久化缓存，能够显著缩短后续构建的重新编译时间。通过在 webpack 配置文件中设置 output.cache，即可开启该功能，让 Webpack 在首次构建后缓存中间结果，从而大幅提升后续构建的速度。

2. 开启多进程构建

Webpack 5 支持多进程构建，可同时利用多个 CPU 内核进行构建。在 webpack 配置文件中设置 parallelism，即可开启此功能，让 Webpack 分配多个进程来构建不同的模块，充分利用 CPU 资源。

3. 弃用 eval-source-map

在开发阶段，source-map 便于调试。但在生产环境中，eval-source-map 却能减小代码体积，提升构建速度。在 webpack 配置文件中禁用 devtool 或将 devtool 设置为 eval-source-map，即可启用该功能。

4. 提取 CSS 文件

将 CSS 文件从 JavaScript 文件中提取出来，可以减小 JavaScript 文件的体积，从而提升构建速度。可以使用 mini-css-extract-plugin 插件来实现这一操作。

5. 压缩 JavaScript 代码

使用 terser-webpack-plugin 等插件可以压缩 JavaScript 代码，减少体积，提高构建速度。

6. 压缩 CSS 代码

和 JavaScript 代码一样，CSS 代码也可以进行压缩，使用 UglifyJsPlugin 等插件，可以进一步提升构建速度。

7. 分析构建结果

webpack-bundle-analyzer 插件能够分析构建结果，识别体积较大的文件和模块。利用此信息，你可以更有针对性地进行优化，提升构建速度。

8. 利用 HappyPack

HappyPack 是一款构建 JavaScript 代码的工具，通过并行构建多个模块，能够提升构建速度。在 webpack 配置文件中添加 HappyPack，即可启用此功能。

9. 实时显示构建进度

webpackbar 插件能够实时显示构建进度，方便追踪构建过程，及时发现异常。在 webpack 配置文件中添加 webpackbar，即可启用此功能。

10. 热更新

利用 webpack-dev-server 进行热更新，在代码变更后自动刷新页面，无需重新构建整个项目，极大提高开发效率。在 webpack 配置文件中添加 webpack-dev-server，即可启用此功能。

结论

通过应用这 10 个优化技巧，你可以大幅提升 Webpack 5 的构建速度，优化工程质量，提升开发效率。掌握这些技巧，助力你应对日益复杂的构建挑战。

常见问题解答

1. 我在 webpack 配置文件中找不到 output.cache 选项，这是怎么回事？
答：output.cache 是 Webpack 5 中的新特性，如果你使用的是旧版本，请更新到 Webpack 5 以使用此功能。

2. 如何设置多进程构建的并发进程数？
答：在 webpack 配置文件中设置 parallelism 的值，即可设置并发进程数。建议将其设置为与 CPU 内核数相同的数值。

3. 我是否需要在所有构建模式下都使用 eval-source-map？
答：否。仅在生产环境中使用 eval-source-map，在开发环境中仍应使用 source-map 便于调试。

4. 如何在 webpack 配置文件中添加 mini-css-extract-plugin？
答：在 webpack 配置文件的 plugins 数组中添加 new MiniCssExtractPlugin()，即可添加该插件。

5. 我使用 webpackbar 后，构建进度条显示不正确，该怎么办？
答：确保使用的是最新版本的 webpackbar 插件，并且已正确配置 webpack 配置文件。