如何将 Lighthouse 添加到持续集成系统，例如 GitHub Actions。
Lighthouse CI 是一套 用于在持续集成期间使用 Lighthouse 的工具。Lighthouse CI 可以 以多种不同的方式纳入开发者工作流程。本指南涵盖以下内容： 以下主题：
- 使用 Lighthouse CI CLI。
- 配置 CI 提供方以运行 Lighthouse CI。
- 设置 GitHub 操作并 状态 查看 适用于 Lighthouse CI。这会自动在以下位置显示 Lighthouse 结果： GitHub 拉取请求。
- 为 Lighthouse 报告构建性能信息中心和数据存储区。
概览
Lighthouse CI 是一套免费工具，有助于将 Lighthouse 用于 性能监控一份 Lighthouse 报告可提供一个网页快照 网页在运行后的表现Lighthouse CI 显示了 会随着时间的推移而变化。这项数据可用于确定 特定的代码更改，或确保在测试期间 持续集成流程尽管性能监控是 Lighthouse CI 的常见应用场景，可用于监控 Lighthouse 报告 - 例如，搜索引擎优化 (SEO) 或无障碍功能。
Lighthouse CI 的核心功能由 Lighthouse CI 命令提供
Line 接口。（注意：这是独立于 Lighthouse 的
CLI）。通过
Lighthouse CI CLI 提供了一系列
命令
使用 Lighthouse CI。例如，autorun 命令会执行多个
Lighthouse 运行、识别 Lighthouse 中位数报告并上传报告
存储数据此行为可通过传递额外标志进行高度自定义
或自定义 Lighthouse CI 的配置文件 lighthouserc.js。
虽然 Lighthouse CI 的核心功能主要封装在 Lighthouse CI CLI，则 Lighthouse CI 通常通过 方法：
- 在持续集成中运行 Lighthouse CI
- 使用在每次拉取时都会运行和注释的 Lighthouse CI GitHub 操作 请求
- 通过 Lighthouse 提供的信息中心跟踪一段时间内的效果 服务器。
所有这些方法都基于 Lighthouse CI CLI 构建。
Lighthouse CI 的替代方案包括第三方性能监控 服务或编写自己的脚本，以在 CI 期间收集性能数据 过程。如果您希望 由其他人负责管理您的性能监控服务器， 测试设备，或者，如果需要通知功能（例如电子邮件或 Slack） 而无需自行构建这些功能。
在本地使用 Lighthouse CI
本部分介绍如何在本地运行和安装 Lighthouse CI CLI，
如何配置 lighthouserc.js。在本地运行 Lighthouse CI CLI 是
确保 lighthouserc.js 配置正确无误的最简单方法。
安装 Lighthouse CI CLI。
npm install -g @lhci/cli通过将
lighthouserc.js文件放在 代码库此文件是强制性文件，将包含 Lighthouse CI 相关配置信息。虽然 Lighthouse CI 可以配置为 可以在没有 Git 的情况下使用 代码库， 本文中的说明假设您的项目代码库已配置为 使用 Git。在您的代码库的根目录中，创建一项
lighthouserc.js配置 文件。touch lighthouserc.js将以下代码添加到
lighthouserc.js。此代码是空的 Lighthouse CI 配置。您将在 后续步骤。module.exports = { ci: { collect: { /* Add configuration here */ }, upload: { /* Add configuration here */ }, }, };每当 Lighthouse CI 运行时，它都会启动一台服务器来为您的网站提供服务。 此服务器使 Lighthouse 能够加载您的网站，即使没有任何其他 服务器正在运行。Lighthouse CI 运行完毕后，它会 自动关闭服务器。为了确保投放正常运行 您应该配置
staticDistDir或startServerCommand属性。如果您的网站是静态网站，请将
staticDistDir属性添加到ci.collect对象来指示静态文件的位置。Lighthouse CI 将会 在测试您的网站时，使用自己的服务器提供这些文件。如果您的 网站不是静态的，请将startServerCommand属性添加到ci.collect对象来指示启动服务器的命令。 Lighthouse CI 将在测试期间启动新的服务器进程并关闭该进程 。// Static site example collect: { staticDistDir: './public', }// Dynamic site example collect: { startServerCommand: 'npm run start', }将
url属性添加到ci.collect对象，以指示 Lighthouse CI 运行 Lighthouse。url属性的值应为 以网址数组的形式提供；该数组可以包含一个或多个网址。修改者 默认情况下，Lighthouse CI 将针对每个网址运行 Lighthouse 三次。collect: { // ... url: ['http://localhost:8080'] }将
target属性添加到ci.upload对象，并将值设置为'temporary-public-storage'。Lighthouse 收集的报告 Lighthouse CI 将上传到临时公共存储空间。报告 保留七天，然后系统会自动将其删除。此设置 本指南使用“临时公开存储空间”上传选项 进行设置。如需了解 Lighthouse 报告的其他存储方式，请参阅 添加到 文档。upload: { target: 'temporary-public-storage', }报告的存储位置大致如下所示：
https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html（由于报告已被删除，因此该网址无效。）
使用
autorun命令从终端运行 Lighthouse CI CLI。 这将运行 Lighthouse 三次，并上传 Lighthouse 中位数 报告。lhci autorun如果您已正确配置 Lighthouse CI，则运行此命令应该 会生成类似于以下内容的输出：
✅ .lighthouseci/ directory writable ✅ Configuration file found ✅ Chrome installation found ⚠️ GitHub token not set Healthcheck passed! Started a web server on port 65324... Running Lighthouse 3 time(s) on http://localhost:65324/index.html Run #1...done. Run #2...done. Run #3...done. Done running Lighthouse! Uploading median LHR of http://localhost:65324/index.html...success! Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591720514021-82403.report.html No GitHub token set, skipping GitHub status check. Done running autorun.您可以忽略控制台输出中的
GitHub token not set消息。答 仅当您想将 Lighthouse CI 与 GitHub 搭配使用时，才需要 GitHub 令牌 行动。本文后面部分介绍了如何设置 GitHub 操作。点击输出中以
https://storage.googleapis.com...会将您转到 Lighthouse 报告 与 Lighthouse 运行中位数相对应的指标。autorun使用的默认值可通过命令行或lighthouserc.js。例如，下面的lighthouserc.js配置 表示每次autorun都应收集 5 次 Lighthouse 运行 执行。更新
lighthouserc.js以使用numberOfRuns属性：module.exports = { // ... collect: { numberOfRuns: 5 }, // ... }, };重新运行
autorun命令：lhci autorun终端输出应该会显示 Lighthouse 已运行五次， 比默认的三个值：
✅ .lighthouseci/ directory writable ✅ Configuration file found ✅ Chrome installation found ⚠️ GitHub token not set Healthcheck passed! Automatically determined ./dist as `staticDistDir`. Set it explicitly in lighthouserc.json if incorrect. Started a web server on port 64444... Running Lighthouse 5 time(s) on http://localhost:64444/index.html Run #1...done. Run #2...done. Run #3...done. Run #4...done. Run #5...done. Done running Lighthouse! Uploading median LHR of http://localhost:64444/index.html...success! Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1591716944028-6048.report.html No GitHub token set, skipping GitHub status check. Done running autorun.如需了解其他配置选项，请参阅 Lighthouse CI 配置 文档。
设置 CI 流程以运行 Lighthouse CI
Lighthouse CI 可与您喜爱的 CI 工具搭配使用。“配置持续集成” 提供方 部分包含的代码示例，展示如何 将 Lighthouse CI 纳入常用 CI 工具的配置文件中。 具体而言，这些代码示例展示了如何运行 Lighthouse CI 以收集 性能测量。
使用 Lighthouse CI 收集性能测量值是一个很好的切入点
以及性能监控不过，高级用户可能希望
如果 build 不符合预定义的
条件，例如通过特定的 Lighthouse 审核或满足所有性能要求
预算。此行为通过
assert
属性。lighthouserc.js
Lighthouse CI 支持三种级别的断言：
off：忽略断言warn：在 stderr 中输出失败error：将失败输出到 stderr，并以非零值退出 Lighthouse CI 退出 代码
以下是 lighthouserc.js 配置的示例，其中包括
断言。它会为 Lighthouse 的性能得分设置断言，
无障碍功能类别。要尝试此操作，请将下面显示的断言添加到
您的 lighthouserc.js 文件，然后重新运行 Lighthouse CI。
module.exports = {
ci: {
collect: {
// ...
},
assert: {
assertions: {
'categories:performance': ['warn', {minScore: 1}],
'categories:accessibility': ['error', {minScore: 1}]
}
},
upload: {
// ...
},
},
};
它生成的控制台输出如下所示：
如需详细了解 Lighthouse CI 断言，请参阅 文档。
设置 GitHub 操作以运行 Lighthouse CI
GitHub 操作可用于 Lighthouse CI。这样，每当您的代码被激活时， 更改推送到 GitHub 代码库的任何分支。结合使用 状态为 查看 以便在每个拉取请求上显示这些结果
在代码库的根目录中，创建一个名为
.github/workflows。通过 工作流程 位于此目录中工作流是指 在预定时间（例如，当推送代码时）运行， 由一项或多项操作组成mkdir .github mkdir .github/workflows在
.github/workflows中，创建一个名为lighthouse-ci.yaml的文件。此文件 将保存新工作流的配置。touch lighthouse-ci.yaml将以下文本添加到
lighthouse-ci.yaml。name: Build project and run Lighthouse CI on: [push] jobs: lhci: name: Lighthouse CI runs-on: ubuntu-latest steps: - uses: actions/checkout@v1 - name: Use Node.js 10.x uses: actions/setup-node@v1 with: node-version: 10.x - name: npm install run: | npm install - name: run Lighthouse CI run: | npm install -g @lhci/cli@0.3.x lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"此配置设置了一个工作流，其中包含的单个作业将运行 每当有新代码推送到代码库时此作业包含四个步骤：
- 查看将运行 Lighthouse CI 的代码库
- 安装并配置节点
- 安装所需的 npm 软件包
- 运行 Lighthouse CI 并将结果上传到临时公共存储空间。
提交这些更改并将其推送到 GitHub。如果您已正确遵循 执行上述步骤后，将代码推送到 GitHub 将触发运行工作流 。
确认 Lighthouse CI 是否已触发并查看报告 生成的项目，请转到项目的操作标签页。您应该会看到 构建项目和运行 Lighthouse CI 工作流列在最常用的 最近的提交。
您可以找到与特定提交对应的 Lighthouse 报告 在操作标签页中。点击提交，点击 Lighthouse CI 然后展开运行 Lighthouse CI 步骤的结果。
您刚刚设置了运行 Lighthouse CI 的 GitHub 操作。这将是 在与 GitHub 状态结合使用时非常有用 检查。
设置 GitHub 状态检查
状态检查（如果已配置）会在每个 PR 和 通常包括测试结果或 build。
以下步骤说明了如何为 Lighthouse CI 设置状态检查。
转到 Lighthouse CI GitHub 应用 页面并点击配置。
（可选）如果您属于 GitHub 上多个组织，请选择 拥有您要使用 Lighthouse 的代码库的组织 CI。
如果您想在所有代码库中启用 Lighthouse CI，请选择所有代码库 或者，如果您只想使用代码库，请选择仅选择代码库 将其放在特定代码库中，然后选择这些代码库。然后点击 安装和授权。
复制显示的令牌。您将在下一步中用到它。
如需添加令牌，请导航到 GitHub 的 Settings 页面 代码库中，点击密钥，然后点击添加新密钥。
将名称字段设置为
LHCI_GITHUB_APP_TOKEN，并设置值 字段添加到您在上一步中复制的令牌，然后点击添加 密钥按钮。转到
lighthouse-ci.yaml文件，然后将新的环境密钥添加到“运行 Lighthouse CI”中命令。
- name: run Lighthouse CI
run: |
npm install -g @lhci/cli@0.3.x
lhci autorun --upload.target=temporary-public-storage || echo "LHCI failed!"
+ env:
+ LHCI_GITHUB_APP_TOKEN: $
- 状态检查现已可供使用。要进行测试，请创建一个新的拉取请求 请求 或将提交推送到现有拉取请求
设置 Lighthouse CI 服务器
Lighthouse CI 服务器提供一个信息中心，用于探索历史数据 Lighthouse 报告。它还可以作为私有的长期数据存储区， Lighthouse 报告。
- 选择要比较的提交。
- 两次提交之间的 Lighthouse 得分变化量。
- 本部分仅显示两次提交之间发生更改的指标。
- 回归以粉红色突出显示。
- 改进会以蓝色突出显示。
Lighthouse CI Server 最适合熟悉部署和 管理他们自己的基础架构
了解如何设置 Lighthouse CI 服务器，包括 Heroku 和 Docker 进行部署，请参阅这些 说明。