(译)删除未使用的前端代码

  像 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 }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpyfxd.html