【Chrome web.dev Live 2020总结】第一天第5集:如何分析JavaScript包

举报
华为云官网技术团队 发表于 2020/07/22 14:09:10 2020/07/22
【摘要】 分析并优化项目编译出的JS包是提升页面性能重要一环。然而,项目在打包时,往往会采取一系列的优化措施,把多个js文件编译成一个或几个优化后的js文件。此时,我们便需要借助一些工具以分析这些优化后的文件。

如何分析项目中编译出的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


【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容, 举报邮箱:cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。