本文将讲解在开发过程中对前端项目进行优化的部分,这部分涉及到 Webpack 的优化策略。尽管现在已经有很多层出不穷的构建工具,例如 vite, esbuilder 等等,但是它们很多的优化思想还是经过在 Webpack 上实践之后得出的结论。目前,Webpack 的优化策略也是面试过程中频率很高的一部分。可以说,掌握了 Webpack 的优化策略,你能举一反三,将其思想应用到其他与性能相关的方面。
本文依赖的 Webpack 版本基于 Webpack@5.46.0
。
在开发的过程中,我们一般需要有依据地进行优化。通常,有如下优化依据:
- 编译速度分析
- 打包体积分析
而查看这些分析数据可以通过 Webpack 提供的第三方插件进行。所以,在分析你的项目之前,可以先安装如下插件:
progress-bar-webpack-plugin
:查看编译进度speed-measure-webpack-plugin
:查看编译速度webpack-bun