WEBKT

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

230 0 0 0

想必你已经听说过 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"
  }
}
  1. 创建一个 Jenkinsfile，并添加以下步骤：
pipeline {
  agent any
  stages {
    stage('Checkout') {
      steps {
        checkout scm
      }
    }
    stage('Install') {
      steps {
        sh 'npm install'
      }
    }
    stage('Test') {
      steps {
        sh 'node lighthouse-test.js'
      }
    }
  }
}
  1. 在 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
  1. 创建配置文件.lighthouserc.js。
  2. 运行。
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。
技术小能手 LighthouseNode.js性能测试

评论点评