【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