【Chrome web.dev Live 2020总结】第一天第5集:如何分析JavaScript包
如何分析项目中编译出的JS包
分析并优化项目编译出的JS包是提升页面性能重要一环。然而,项目在打包时,往往会采取一系列的优化措施,把多个js文件编译成一个或几个优化后的js文件。此时,我们便需要借助一些工具以分析这些优化后的文件。
下面的工具由简单到复杂,各取所需
§ 5.1 Chrome浏览器开发工具
§ 5.1.1 工具介绍
Chrome浏览器自带功能,可以查看页面加载的JS信息
§ 5.1.2 使用方法
Windows: Ctrl+Shift+J(F12也行)
Mac: Cmd+Option+J
点击Network->JS便能查看加载的JS文件,左下角的{}按钮可以格式化JS文件,使文件更易读
§ 5.1.3 使用示例
§ 5.2 Chrome浏览器开发工具的coverage功能
§ 5.2.1 工具介绍
查看JS代码的覆盖率,如果文件覆盖率低,说明该文件未使用代码比例很高。可以通过精简无用代码或者懒加载优化
§ 5.2.2 使用方法
在唤起Chrome开发工具的基础上
Windows: Ctrl+Shift+P
Mac: Cmd+Shift+P
输入coverage->选择show coverage->点击reload按钮->选择JavaScript 即可
§ 5.2.3 使用示例
§ 5.3 webpack自带分析功能
§ 5.3.1 工具介绍
webpack作为常用的编译工具,也自带了编译JS文件的分析功能
更多介绍可以参见webpack官方文档
§ 5.3.2 使用方法
命令行输入 webpack --profile --json > stats.json
可以在根目录生成一个stats.json的文件,里面详细的列出了编译后的各JS文件信息
§ 5.3.3 使用示例
§ 5.4 webpack-bundle-analyzer
§ 5.4.1 工具介绍
此webpack插件可以生成可视化的代码分析报告
§ 5.4.2 使用方法
详见 https://segmentfault.com/a/1190000012220132
§ 5.4.3 使用示例
§ 5.5 source map
§ 5.5.1 工具介绍
编译代码时往往会经历代码混淆这一步,大幅减低代码可读性。通过source map可以保存代码转化关系,方便开发定位问题
§ 5.5.2 使用方法
详见 https://juejin.im/post/58293502a0bb9f005767ba2f
§ 5.5.3 使用示例
§ 5.6 lighthouse
§ 5.6.1 工具介绍
https://developers.google.com/web/tools/lighthouse
§ 5.6.2 使用方法
详见 https://zhuanlan.zhihu.com/p/33752746
- 点赞
- 收藏
- 关注作者
评论(0)