前言
随着 web 应用程序愈加复杂，前端代码的体积已经成为一个非常重要的问题。Webpack 是一种前端构建工具，通过加载器和插件，它可以让开发者将多个 js/css/html 文件打包成一个或多个文件。
但是，Webpack 打包出的文件体积并非一定是最小的。有时候，我们会发现我们的 bundle 非常大，但是不知道它大小来自于哪些模块或文件。Webpack-bundle-analyzer 这个工具可以很好地解决这个问题。它可以将 bundle 文件分析成一个可视化的矩形树状图，让我们可以很直观地看到各个模块的大小，以及它们之间的依赖关系。
本文将介绍如何在Webpack中添加webpack-bundle-analyzer的插件，并解释如何阅读其输出结果来改善你的应用程序。
安装和使用
安装 webpack-bundle-analyzer 插件非常简单。首先，安装 webpack-bundle-analyzer：
npm install webpack-bundle-analyzer --save-dev
接下来，需要在 webpack 配置中添加一个插件：
-- -------------------- ---- -------
----- -------------------- - --------------------------------------------------------
-------------- - -
-- ---
-------- -
--- ----------------------
-
-- ---
--之后，我们可以使用 webpack 命令来编译我们的应用，并查看结果：
webpack --profile --json > stats.json npx webpack-bundle-analyzer stats.json
这个命令将在默认浏览器中打开一个新窗口，显示我们应用的 bundle 分析结果。
如何读取 bundle 分析结果
打开 Webpack-bundle-analyzer 的分析页面，你应该可以看到类似下图的界面：
左侧的面板显示应用程序打包的模块，右侧显示项目的文件大小以及相对大小分布图表。
你可能会注意到，至少有两个模块具有非常高的相对大小：一个是我们的应用本身，另一个是一些依赖模块的总和。我们可以通过缩放图表来改变显示角度。
如果我们要优化应用，我们首先需要了解哪些模块是重要的，并且哪些可以缩减。因此，在这个例子中，我们需要优化最大的两个模块：our-app 和 vendor。
单击要分析的模块可以打开一个新的分析器面板来查看有关该模块的更多详细信息。面板上方的导航栏包含有关当前面板的信息。
例如，在我们的示例中，单击“our-app”会打开新的“我们的应用”标签，我们可以在其中查看更多信息。
有关这个面板的内容有两个非常重要的信息：
- 它显示了这个模块的大小是多少以及相对大小是多少。
- 它显示了这个模块中包含了哪些文件。
展开“我们的应用”模块中的“文件”部分，我们可以看到哪些文件占用空间，其中哪些文件可以被排除在外，从而减少应用程序的大小。
例如，在我们的示例中，我可以看到我们的应用程序包含一个叫做“unused.js”的文件，这个文件很大但是从来没有使用过。通过将其移除，我可以轻松地减少我们应用程序的大小。
一些优化建议
移除未使用的库、模块、代码。在你的 bundle 中含有未使用的代码不仅增大了你的文件大小，还会增加浏览器执行的负担。Angular，Preact 和 React 都有相关工具（ngrx/store-devtools、preact/debug 和 redux-devtools）来帮助你检查无用部分的代码。
按需加载模块。使用模块化加载可以让你在运行时仅加载你的应用所需的部分代码。
引入 CDN 版本的库。CDN 版本的库是常常被浏览器缓存的，这也就减少了加载时间。
压缩文件。使用 gzip 将你的文本内容压缩，可以在你的浏览器和服务器之间减少通信数据的大小。webpack 已经内置了 Brotli 插件，可以进一步压缩文件。
总结
Webpack-bundle-analyzer 是一个非常强大的工具，可以帮助你优化应用程序的大小，从而使其更快、效率更高。我们在本文中介绍了如何安装和使用这个工具，并解释了如何阅读分析结果来优化应用程序。
我们还提供了一些优化建议，你可以使用这些建议来改善你自己的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64635a07968c7c53b046124d