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

原文作者：Houssein Djirdeh

译者：UC 国际研发 Jothy

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

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

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 数据库组件，请将导入语句改为仅获取该文件：

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

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

删除不需要的库

不是所有的库都可以轻松分解并选择性地导入，在这些情况下，你得想清楚是否可以完全删除该库。构建定制解决方案或换用更轻量级的方案始终是值得考虑的。但是，在从应用中完全删除某库之前，你得权衡其中的复杂性和工作量。

好文推荐：

Redux作者从“UI工程要素”谈如何成为领域专家

“UC国际技术”致力于与你共享高质量的技术文章

欢迎关注我们的公众号、将文章分享给你的好友