（译）删除未使用的前端代码

注：本文翻译自 https://web.dev/fast/remove-unused-code，Written by Houssein Djirdeh。如有翻译错误请指正。

　　像 npm 这样的包管理器通过允许任何人轻松地下载和使用超过50万公共包来让JavaScript世界变得更好。但我们经常引入一些没有充分利用的库。为了解决这个问题，可以通过分析你的bundle（即打包后得到的代码包，下文简称为包）来检测未使用的代码。然后，移除未使用的和非必需的库。

分析包

　　查看网络请求大小的最简单方法是打开谷歌浏览器的开发者工具中的 Network 面板，把 Disable Cache 勾上，然后刷新页面。

　　开发者工具中的 Coverage 标签页能告诉你有多少你的应用中的CSS和JS代码是未使用的。

　　通过 Node CLI 配置一个完整的 Lighthouse 配置，一个“未使用的JavaScript”检查工具 Audits 同样可以用来跟踪你的应用程序附带了多少未使用的代码。

　　如果你使用 webpack 作为你的打包器，Webpack Bundle Analyzer 将帮助您研究是什么组成了这个包。像引入其它一些插件一样在 webpack 配置中引入这个插件：

1 module.exports = {
2   //...
3   plugins: [
4     //...
5     new BundleAnalyzerPlugin()
6   ]
7 }

　　尽管 webpack 通常用来构建单页应用，但其他打包器，例如 Parcel 和 Rollup ，同样有可以用来分析包的可视化工具。

　　引入这个插件后重新加载页面将呈现整个包的可缩放矩形树图。

　　通过使用这种可视化工具，你可以查看包的哪些部分比其他部分大，并更好地了解导入的所有库。这有助于识别你是否正在使用一些未使用或不必要的库。

删除未使用的库

　　在上面的矩形树图中，在 @firebase 域中有相当多的包。如果你的网站只需要 firebase 的数据库组件，更改获取该库的 imports：

1 //import firebase from 'firebase';
2 import firebase from 'firebase/app';
3 import 'firebase/database';

　　需要强调的是，对于较大的应用，这个过程要复杂得多。

　　对于你非常确定没有在任何地方使用的看起来很神秘的包，请后退一步，查看哪些顶级依赖项正在使用它。试着找到一种方法，只从中导入你需要的组件。如果你没有使用一个库，则删除它。如果初始页面加载不需要这个库，则考虑是否可以 lazy loaded（延迟加载）。

删除非必需的库

　　并不是所有的库都可以容易地分解为多个部分并有选择地导入。在这些场景中，考虑是否可以完全删除这个库。构建自定义解决方案或利用更轻量级的替代方案始终是值得考虑的选项。但是，在从应用程序中完全删除一个库之前，必须权衡这两种工作的复杂性和工作量。

实战

　　了解更多，并将本指南付诸行动：

　　https://web.dev/fast/remove-unused-code/codelab-remove-unused-code

原文链接:https://www.cnblogs.com/mr-nan/p/remove-unused-code.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有