在现代 Web 开发中，前端框架和库越来越多，这导致项目的代码体积越来越大，这也就导致了用户的访问速度变慢。为了解决这个问题，我们可以使用 webpack-bundle-analyzer 来优化我们的 Webpack 打包体积。
webpack-bundle-analyzer 是什么？
webpack-bundle-analyzer 是一个 Webpack 插件，它可以分析 Webpack 打包后的文件大小和结构，并以可视化方式展现出来，帮助我们找到打包后的体积较大的模块，从而进行优化。
如何使用 webpack-bundle-analyzer？
安装
首先，我们需要安装 webpack-bundle-analyzer：
npm install --save-dev webpack-bundle-analyzer
配置
在 webpack 配置文件中，我们需要将 webpack-bundle-analyzer 添加为插件。以下是一个简单的例子：
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
plugins: [
new BundleAnalyzerPlugin()
]
};运行
在运行 webpack 打包命令时，webpack-bundle-analyzer 会自动启动一个本地服务器，并在浏览器中打开分析报告。我们可以在浏览器中查看分析报告，找到打包后体积较大的模块。
webpack --profile --json > stats.json webpack-bundle-analyzer stats.json
如何从分析报告中得到优化建议？
查找体积较大的模块
在分析报告中，我们可以看到各个模块的体积大小，我们可以根据模块的体积大小，找到体积较大的模块，然后进行优化。
拆分模块
如果我们发现某个模块的体积较大，我们可以考虑将其拆分成更小的模块，这可以减少打包后的体积，并提高应用的加载速度。
使用懒加载
如果我们的应用中有一些模块只在特定的情况下才会被使用到，我们可以考虑使用懒加载来减少打包后的体积。
使用 tree shaking
tree shaking 是一个可以帮助我们删除未使用代码的技术，在 Webpack 中，我们可以使用 UglifyJSPlugin 来实现 tree shaking。
示例代码
以下是一个简单的示例，演示如何使用 webpack-bundle-analyzer 来分析打包后的体积，找到体积较大的模块，并进行优化。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
----- -------------------- - --------------------------------------------------------
-------------- - -
------ -----------------
------- -
--------- ------------
----- ----------------------- -------
--
------------- -
--------- -----
------------ -
------- -----
-
--
-------- -
--- ---------------------------------------------
--- ----------------------
-
--结论
使用 webpack-bundle-analyzer 可以帮助我们找到体积较大的模块，并进行优化，从而提高应用的加载速度。但是，我们也需要注意，过度优化可能会导致代码变得更加复杂，从而影响代码的可维护性。因此，我们应该在优化代码大小和可维护性之间找到一个平衡点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675f8663e49b4d071625988d