云社区 博客 博客详情
云社区 博客 博客详情

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

华为云官网技术团队 发表于 2020-07-22 14:09:10 07-22 14:09
华为云官网技术团队 发表于 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
点赞
分享文章到微博
分享文章到朋友圈

评论 (0)


0/1000
评论

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

评论

您还没有写博客的权限!

温馨提示

您确认删除评论吗?

确定
取消
温馨提示

您确认删除评论吗?

删除操作无法恢复,请谨慎操作。

确定
取消
温馨提示

您确认删除博客吗?

确定
取消

确认删除

您确认删除博客吗?

确认删除

您确认删除评论吗?

温馨提示

登录超时或用户已下线,请重新登录!!!

确定
取消