一块儿来燃烧 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国际技术”致力于与你共享高质量的技术文章

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