阅读 1207

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

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

关注下面的标签,发现更多相似文章
评论