云社区 博客 博客详情

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

华为云官网技术团队 发表于 2020-07-22 14:09:10 2020-07-22
0
0

【摘要】 分析并优化项目编译出的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


登录后可下载附件,请登录或者注册

【版权声明】本文为华为云社区用户翻译文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:huaweicloud.bbs@huawei.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
评论文章 //点赞 收藏 0
点赞
分享文章到微博
分享文章到朋友圈

上一篇:【Chrome web.dev Live 2020总结】第一天第4集:掌握BigQuery上的Chrome UX报告

下一篇:【Chrome web.dev Live 2020总结】第3天第13集:Web支付中的新增功能

评论 (0)


登录后可评论,请 登录注册

评论