Lighthouse Node API 实战：编程化性能测试与结果集成

想必你已经听说过 Lighthouse 了，作为 Google 出品的一款强大的网站性能测试工具，它能帮你全面评估网站的性能、可访问性、最佳实践、SEO 以及 PWA 等多个方面。

但你可能更习惯于在 Chrome DevTools 中使用 Lighthouse，或者通过命令行工具来运行它。今天，咱们来聊点不一样的——Lighthouse Node API，它能让你在 Node.js 环境中以编程的方式使用 Lighthouse，实现更灵活、更强大的性能测试与结果集成。

为什么选择 Lighthouse Node API？

相比于 Chrome DevTools 和命令行工具，Lighthouse Node API 具有以下优势：

• 灵活性： 你可以完全控制 Lighthouse 的运行方式，自定义测试配置、测试流程，甚至模拟不同的网络环境和设备。
• 可编程性： 你可以将 Lighthouse 集成到你的自动化测试流程、持续集成/持续部署 (CI/CD) 流水线中，实现性能测试的自动化。
• 可扩展性： 你可以轻松地将 Lighthouse 的测试结果与各种工具和服务集成，例如数据可视化工具、报告生成系统、监控平台等。

快速上手：安装与基本使用

首先，你需要安装 Lighthouse：

npm install -g lighthouse

然后，创建一个 JavaScript 文件，例如 lighthouse-test.js，并编写以下代码：

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');
 
(async () => {
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const options = { logLevel: 'info', output: 'html', onlyCategories: ['performance'], port: chrome.port };
  const runnerResult = await lighthouse('https://www.example.com', options);
 
  // `.report` 是 HTML/JSON/CSV 格式的测试报告
  const reportHtml = runnerResult.report;
  console.log('Report is done for', runnerResult.lhr.finalUrl);
  console.log('Performance score was', runnerResult.lhr.categories.performance.score * 100);
 
  await chrome.kill();
})();

这段代码做了以下几件事：

1. 引入 lighthouse 和 chrome-launcher 模块。
2. 使用 chrome-launcher 启动一个无头 Chrome 实例。
3. 设置 Lighthouse 的运行选项，例如日志级别、输出格式、测试类别和 Chrome 端口。
4. 调用 lighthouse 函数，传入要测试的 URL 和选项。
5. 获取测试结果，并输出报告和性能得分。
6. 关闭 Chrome 实例。

运行这段代码：

node lighthouse-test.js

你会在控制台中看到测试结果，并生成一个 HTML 格式的测试报告。

进阶配置：自定义测试选项

Lighthouse 提供了丰富的配置选项，让你能够根据自己的需求定制测试过程。以下是一些常用的配置选项：

• onlyCategories：指定要测试的类别，例如 ['performance', 'accessibility', 'best-practices', 'seo', 'pwa']。
• output：指定测试报告的输出格式，可以是 html、json 或 csv。
• logLevel：设置日志级别，可以是 silent、error、info 或 verbose。
• emulatedFormFactor：模拟设备类型，可以是 mobile 或 desktop。
• throttlingMethod：模拟网络节流方法，可以是devtools, provided, or simulate.
• throttling：自定义网络节流参数，例如 rttMs（往返延迟）、throughputKbps（吞吐量）、requestLatencyMs、 downloadThroughputKbps、uploadThroughputKbps、cpuSlowdownMultiplier（CPU 减速倍数）等。
• extraHeaders：设置额外的 HTTP 请求头。
• precomputedLanternData and lanternData： 使用预先计算的性能数据。
• budgets：设置性能预算。

例如，以下代码模拟了移动设备在 3G 网络下的测试：

const options = {
  onlyCategories: ['performance'],
  emulatedFormFactor: 'mobile',
  throttlingMethod: 'simulate',
  throttling: {
    rttMs: 150,
    throughputKbps: 1638.4,
    cpuSlowdownMultiplier: 4,
  },
};

实战案例：集成到 CI/CD 流水线

假设你使用 Jenkins 作为 CI/CD 工具，你可以将 Lighthouse 集成到你的构建流程中，实现每次代码提交后自动运行性能测试。

1. 在 Jenkins 中安装 Node.js 插件。
2. 在你的项目中创建一个 package.json 文件，并添加以下依赖：

{
  "dependencies": {
    "lighthouse": "^9.6.8",
    "chrome-launcher": "^0.15.1"
  }
}

3. 创建一个 Jenkinsfile，并添加以下步骤：

pipeline {
  agent any
  stages {
    stage('Checkout') {
      steps {
        checkout scm
      }
    }
    stage('Install') {
      steps {
        sh 'npm install'
      }
    }
    stage('Test') {
      steps {
        sh 'node lighthouse-test.js'
      }
    }
  }
}

4. 在 Jenkins 中配置你的项目，并指定 Jenkinsfile 的路径。

现在，每次你提交代码时，Jenkins 都会自动运行 Lighthouse 性能测试，并将结果输出到构建日志中。你还可以将测试报告保存为构建产物，方便后续查看。

结果集成：数据可视化与报告生成

Lighthouse Node API 可以生成 JSON 格式的测试报告，你可以将这些数据集成到各种工具和服务中，实现数据可视化和报告生成。

集成到数据可视化工具

你可以使用 Grafana、Kibana 等数据可视化工具，将 Lighthouse 的测试结果以图表的形式展示出来，方便你监控网站的性能变化。

1. 将 Lighthouse 的 JSON 报告导入到你的数据存储中，例如 Elasticsearch、InfluxDB 等。
2. 配置数据可视化工具，连接到你的数据存储，并创建相应的图表和仪表盘。

集成到报告生成系统

你可以使用 Node.js 的报告生成库，例如 lighthouse-reporter，将 Lighthouse 的 JSON 报告转换成更友好的 HTML 或 PDF 格式。
或者使用lighthouse-ci工具生成报告。

1. 安装 lighthouse-ci：

npm install -g @lhci/cli

2. 创建配置文件.lighthouserc.js。
3. 运行。

lhci autorun

深入探索：Lighthouse 的工作原理

Lighthouse 通过模拟用户与网页的交互，收集各种性能指标，并根据预定义的规则进行评分。它主要关注以下几个方面：

• 首次内容绘制 (FCP)： 衡量用户首次看到页面内容的时间。
• 首次有效绘制 (FMP)： 衡量用户首次看到页面主要内容的时间。
• 速度指数 (SI)： 衡量页面加载速度的综合指标。
• 可交互时间 (TTI)： 衡量页面达到完全可交互状态的时间。
• 最大内容绘制 (LCP)： 衡量视口中最大的内容元素何时可见。
• 累积布局偏移 (CLS)： 衡量页面布局的稳定性。

Lighthouse 会根据这些指标的得分，给出相应的优化建议，帮助你改进网站的性能。

总结

Lighthouse Node API 为开发者提供了一种强大的工具，让你能够在 Node.js 环境中以编程的方式进行性能测试，并将其集成到你的开发流程和各种工具中。通过合理利用 Lighthouse Node API，你可以更好地监控和优化网站的性能，提升用户体验。

遇到的问题

使用过程中，可能会遇到Error: No Chrome installations found.错误，这是因为chrome-launcher无法找到 Chrome 安装位置。
解决方法是：

1. 通过launch()方法的chromePath参数设置。例如：const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'], chromePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome' });。
2. 设置环境变量CHROME_PATH。