设置页面性能预算
工具：perf-budget-calculator
介绍：可以显示在不同网速下打开速度是多少，文件total大小多少：下图是报告
整体页面性能报告
工具：Lighthouse 或者 Lighthouse + lightWallet
Lighthouse介绍官网：
运行Lighthouse的方式有两种：chrome扩展程序，或者命令行工具。 很强大，会给出性能、可访问性、SEO、PWA和best practices(最佳做法)这几个方面的打分。以及对应的优化建议。
Lighthouse + LightWallet 使用：输出一个html文件，与Chrome扩展报告一样。
页面速度报告
网站：
https://developers.google.com/speed/pagespeed/insights/
该网站可报告移动设备和桌面设备上页面的性能，并提供有关如何改进该页面的建议。
输出： 实验室数据和实测数据，包括首次内容绘制时间，可交互钱的耗时等指标，以及优化建议，最佳实践和已经通过的审核。
其中实验室数据是使用Lighthouse来分析并给出的性能分数。
使用Chrome面板！
参考文章: 这里
-
覆盖率面板(
show coverage)： 可以看到改页面未用到的代码。
-
获取完整页面截图：
推荐的工作流
- 先使用lighthouse,获取整体性能报告
- 再有针对性的，打开性能面板(performance)、网络面板(network)或者覆盖率面板(coverage)
1
