前端面试，备考第 18 天—— 怎么对项目做性能优化: Webpack 优化策略

Posted 2022-07-12 前端修罗场

本文将讲解在开发过程中对前端项目进行优化的部分，这部分涉及到 Webpack 的优化策略。尽管现在已经有很多层出不穷的构建工具，例如 vite, esbuilder 等等，但是它们很多的优化思想还是经过在 Webpack 上实践之后得出的结论。目前，Webpack 的优化策略也是面试过程中频率很高的一部分。可以说，掌握了 Webpack 的优化策略，你能举一反三，将其思想应用到其他与性能相关的方面。

本文依赖的 Webpack 版本基于 Webpack@5.46.0。

在开发的过程中，我们一般需要有依据地进行优化。通常，有如下优化依据：

• 编译速度分析
• 打包体积分析

而查看这些分析数据可以通过 Webpack 提供的第三方插件进行。所以，在分析你的项目之前，可以先安装如下插件：

• progress-bar-webpack-plugin：查看编译进度
• speed-measure-webpack-plugin：查看编译速度
• webpack-bundle-analyzer：打包体积分析

1. 优化构建速度

在开始之前，我们给出如下思维导图，能够清晰地为你勾画出优化构建速度的方法。