一起来燃烧 Bundle 的“卡路里”

原文作者：Houssein Djirdeh

译者：UC 国际研发 Jothy

写在最前：欢迎你来到“UC国际技术”公众号，我们将为大家提供与客户端、服务端、算法、测试、数据、前端等相关的高质量技术文章，不限于原创与翻译。

编者按：npm 为前端 er 带来了诸多便利，我们只需敲上一条安装语句，便能用上别人精心开发的各种精品库。但你有没有发现，你的应用悄悄地吃成了个“大胖子”？今天，我们请来 Google Web 的工程师 Djirdeh 带你科学“瘦身”，去掉那些“多余的热量”:fire:。

npm 使得 JavaScript 世界焕发生机，你可以通过它轻松下载使用超过 50 万个公共包。 但很多时候，我们引入了库却没能充分利用它们。 要解决这个问题，你得分析你的 bundle，检测出未使用的代码，然后删除未使用及不需要的库。

分析你的 bundle

最简单的查看所有网络请求大小的方法是，在 DevTools 中打开 Network 面板，选择Disable cache(禁用缓存)，然后重新加载页面。

DevTools 中的 Coverage 选项卡可显示应用中有多少未使用的 CSS 和 JS 代码。

通过 Lighthouse 的 Node CLI 为其指定一份完整的配置，便可以使用“Unused JavaScript（未使用的 JavaScript）”审查来追踪应用传输了多少未使用的代码。

如果刚好你的 bundler 是 Webpack，那么 Webpack Bundle Analyzer 插件将帮你分析 bundle 的组成（地址： github.com/webpack-con…

你只需像引入其它 Webpack 插件一样，在配置文件中引入该插件：

虽然我们比较经常使用 webpack 构建单页应用，但其他 bundler（如 Parcel 和 Rollup）也有分析 bundle 的可视化工具。

使用此插件重新加载应用后，你将看到整个包的可缩放树形图。

有了这个可视化功能，你就可以看出 bundle 的哪些部分比较大，并且更好地了解你要导入的所有库。 这能帮你确认你是否正在使用某些未使用或不必要的库。

删除未使用的库

在上面的树形图中， @firebase 域中有相当多的包。 如果你只需要 firebase 数据库组件，请将导入语句改为仅获取该文件：

不过需要强调的是，应用越大，此过程越复杂。

对于那些你非常确定其他地方并未使用的神秘兮兮的包，请退一步看看哪些顶层依赖项正在使用它。 试着做到只引入你需要的组件。如果某个库你不再使用，请将其删除。 如果初始页面的加载不需要某个库，考虑是否懒加载它。