分析工具

浏览器分析工具

network

• 检查资源的数量，大小和消耗的时间
• 分析资源加载的顺序和加载完成的时间

performance

• 分析加载页面过程的fps、cpu、代码调用栈
• 分析消耗时间较长的任务
• 分析页面显示时间，显示过程性能较差的部分
• 在有问题的过程查找对应执行的代码，优化这部分代码

lighthouse

• 使用自带的分析模块，对性能，可用性，SEO等指标进行评分
• 根据优化建议检查代码，资源，进行优化

webpack分析工具

webpack-bundle-analyzer

• 显示包中所有打入的模块
• 显示模块size 及 gzip后的size