【高频考点精讲】前端性能分析工具：Lighthouse的定制化使用指南

最新推荐文章于 2025-06-01 15:49:37 发布

全栈老李技术面试

最新推荐文章于 2025-06-01 15:49:37 发布

阅读量793

点赞数 27

CC 4.0 BY-SA版权

分类专栏：前端高频考点精讲文章标签：前端 javascript html css 面试题 react vue

本文链接：https://blog.csdn.net/liuyun_12138/article/details/148043214

前端性能分析工具：Lighthouse的定制化使用指南

🧑‍🏫 作者：全栈老李

📅 更新时间：2025 年 5 月

🧑‍💻 适合人群：前端初学者、进阶开发者

🚀 版权：本文由全栈老李原创，转载请注明出处。

今天咱们聊聊前端工程师的"体检中心"——Lighthouse。作为Google亲儿子，它不仅能给你的网站做全面体检，还能开出精准的"药方"。我是全栈老李，一个喜欢把复杂技术讲简单的实战派博主。

Lighthouse到底是什么？

想象一下你去医院体检，医生会用各种仪器检查你的身体状况。Lighthouse就是这样一个"医生"，只不过它检查的是你的网站。它能从性能(Performance)、可访问性(Accessibility)、最佳实践(Best Practices)、SEO、PWA(渐进式Web应用)五个维度给你的网站打分。

// 全栈老李提示：这是最简单的Lighthouse使用方式
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

async function runLighthouse(url) {
   
   
  const chrome = await chromeLauncher.launch({
   
   chromeFlags: ['--headless']});
  const options = {
   
   logLevel: 'info', output: 'html', port: chrome.port};
  const runnerResult = await lighthouse(url, options);
  
  // 输出报告
  console.log('性能得分:', runnerResult.lhr.categories.performance.score * 100);
  
  await chrome.kill();
  return runnerResult.lhr;
}

runLighthouse('https://your-site.com');