LightHouse 性能优化

https://zhuanlan.zhihu.com/p/376925215

https://segmentfault.com/a/1190000041524121

Lighthouse 是一个开源的自动化工具，由 Google 开发，用于改善 Web 应用的性能和质量。它已经被集成到 Chrome DevTools 中，并且可以作为一个 Chrome 扩展程序运行，或者从命令行运行。Lighthouse 对 Web 页面运行一系列自动化测试，并生成关于页面性能的报告，开发者可以根据这些报告来优化页面。

Lighthouse 性能指标

Lighthouse 的性能测试报告主要关注以下几个方面：

1. First Contentful Paint (FCP)：首次内容渲染，即页面首次渲染出文本或图片的时间。
2. Largest Contentful Paint (LCP)：最大内容绘制，标识网页渲染出最大文本或图片的时间，与首次有效绘制（First Meaningful Paint, FMP）相似，但是 LCP 是一个通用固定计算规则。
3. Time to Interactive (TTI)：可交互时间，即页面达到可交互状态所需的时间。
4. Cumulative Layout Shift (CLS)：累计布局偏移，衡量页面上内容意外偏移的程度。
5. Total Blocking Time (TBT)：累计阻塞时间，标识网页首次内容渲染和可交互时间之间的所有超时任务的超时累计时间。

Lighthouse 优化建议

根据 Lighthouse 提供的报告，以下是一些常见的性能优化建议：

1. 减少未使用的 JavaScript 和 CSS 代码：

   • 使用懒加载（例如，使用 import() 语法异步加载组件）。
   • 通过摇树优化（Tree-Shaking）删除未使用的代码。
   • 设置合理的 .browserslistrc 文件，减少不必要的 polyfills。

2. 优化体积和消除重复代码：

   • 启用 Gzip 压缩并设置资源缓存策略。
   • 使用 CDN 来提供资源，并确保压缩和缓存。
   • 消除重复的依赖包，使用工具如 lerna 进行依赖管理。

3. 缩短执行时间和链路，避免阻塞主线程：

   • 优化 JavaScript 代码执行速度，例如通过减少循环的层数和正确使用数组方法。
   • 减少串行代码，例如避免滥用 async 和 await。
   • 避免过时的代码实践，如 document.write。

4. 其他注意事项：

   • 确保 CSS 优化，可以考虑使用异步加载。
   • 对第三方库进行二次封装，以减少体积。
   • 正确区分 v-if 和 v-show，确保组件没有被实际实例化。
   • 使用 Chrome DevTools 的 Coverage 工具来查看未执行的代码，减少浪费。

总结

性能优化是一个持续的过程，需要开发者根据实际情况不断调整和改进。Lighthouse 提供了一个方便的工具来识别性能瓶颈，并提供了一系列的优化建议。通过实施这些建议，可以显著提高 Web 应用的加载速度、响应性和用户体验。记住，优化的目标不仅是提高性能指标，还包括提供更快、更可靠的用户体验。