副标题：如何将Lighthouse添加到持续集成系统中，如GitHub Actions。

出现在：快速加载时间

原文地址： web.dev/lighthouse-…

原文作者： web.dev/authors/kat…

发布时间：2020年7月27日

Lighthouse CI是一套用于Lighthouse持续集成的工具。Lighthouse CI可以通过多种方式融入到开发者的工作流程中。本指南包括以下内容。

使用Lighthouse CI CLI。
配置你的CI提供商以运行Lighthouse CI。
为Lighthouse CI设置 GitHub Action和状态检查。这将在GitHub的拉取请求中自动显示Lighthouse的结果。
为Lighthouse报告建立一个性能仪表板和数据存储。

概述

Lighthouse CI是一套免费的工具，方便用户使用Lighthouse进行性能监控。Lighthouse的一份报告提供了网页运行时的性能快照，Lighthouse CI还显示了这些结果随时间的变化。这可以用来识别特定代码变化的影响，或确保在持续集成过程中达到性能阈值。虽然性能监控是Lighthouse CI最常见的应用案例，但它也可以用于监控Lighthouse报告的其他方面，例如，SEO或可访问性。

Lighthouse CI的核心功能是由Lighthouse CI命令行界面提供的，（注意：这是一个独立于 Lighthouse CLI的工具）。Lighthouse CI CLI提供了一系列使用Lighthouse CI的命令，例如，使用autorun命令执行多个Lighthouse运行，识别Lighthouse报告的中值，并上传Lighthouse报告。例如，autorun命令可以执行多个Lighthouse运行，识别Lighthouse报告的中值，并上传报告进行存储。通过传递额外的标志或自定义Lighthouse CI的配置文件lighthouserc.js，可以大量地自定义这些行为。

虽然Lighthouse CI的核心功能主要封装在Lighthouse CI CLI中，但Lighthouse CI通常通过以下方式使用。

将Lighthouse CI作为持续集成的一部分来运行。
使用Lighthouse CI的GitHub动作，对每一个拉取请求都进行注释。
通过Lighthouse Server提供的仪表盘跟踪性能。

所有这些方法都建立在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

Lighthouse CI的配置方法是将lighthouserc.js文件放在项目的repo根目录下。这个文件是必须的，其中包含了Lighthouse CI的相关配置信息。虽然Lighthouse CI可以在没有git repo的情况下进行配置，但本文的说明是假设你的项目 repo已经配置为使用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属性。

如果你的网站是静态的，请在ci.collect对象中添加staticDistDir属性，以指示静态文件的位置。Lighthouse CI会在测试网站时使用自己的服务器来提供这些文件。如果你的网站不是静态的，请在ci.collection对象中添加startServerCommand属性，指明启动服务器的命令。Lighthouse CI会在测试过程中启动一个新的服务器进程，然后将其关闭。

// Static site example
collect: {
  staticDistDir: './public',
}

// Dynamic site example
collect: {
  startServerCommand: 'npm run start',
}

在ci.collect对象中添加 url属性，用于指示Lighthouse CI应该对其运行的URL。url属性的值应该是一个URL数组，这个数组可以包含一个或多个URL。默认情况下，Lighthouse CI会对每个URL运行Lighthouse三次。

collect: {
  // ...
  url: ['http://localhost:8080']
}

注意：这些URL应该可以由你在上一步配置的服务器提供服务。因此，如果你在本地运行Lighthouse CI，这些URL应该包括localhost，而不是你的生产主机。

在ci.upload对象中添加 target属性，并将其设置为 "temporary-public-storage"。Lighthouese CI收集到的Lighthouse报告将被上传到临时公共存储空间。该报告将在此存储7天，然后自动删除。本设置指南使用 "临时公共存储 "上传选项，因为它的设置非常快捷。关于Lighthouse报告的其他存储方式，请参考文档。

upload: {
  target: 'temporary-public-storage',
}

报告的存储位置会类似于这样。

https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1580152437799-46441.report.html

由于报告已经被删除，所以这个URL无法使用）。

在终端上使用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 Action时，才需要GitHub token。如何设置GitHub Action将在本文后面介绍。

点击输出中以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整合到常用CI工具的配置文件中。具体来说，这些代码示例展示了如何在CI过程中运行Lighthouse CI来收集性能测量结果。

使用Lighthouse CI来收集性能测量结果是性能监控的良好开端。然而，高级用户可能希望更进一步，如果不符合预定义的标准，如通过特定的Lighthouse审计或满足所有性能预算，Lighthouse CI会让构建失败。这种行为可以通过lighthouserc.js文件的断言属性进行配置。

Lighthouse CI支持三个级别的断言。

off：忽略断言
warn：将失败打印到stderr
error：将失败信息打印到stderr，并以非零的退出代码退出Lighthouse CI。

下面是一个包含断言的lighthouserc.js配置的例子，它为Lighthouse的性能和可访问性类别设置了断言。它为Lighthouse的性能和可访问性类别设置了断言。如果你想尝试一下，请在lighthouserc.js文件中添加如下所示的断言，然后重新运行Lighthouse CI。

module.exports = {
  ci: {
    collect: {
      // ...
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 1}],
        'categories:accessibility': ['error', {minScore: 1}]
      }
    },
    upload: {
      // ...
    },
  },
};

它生成的控制台输出是这样的。

Lighthouse CI生成的警告信息截图

关于Lighthouse CI断言的更多信息，请参考文档。

设置一个GitHub Action来运行Lighthouse CI

本节假定你熟悉git、GitHub和GitHub Pull请求。

GitHub Action可以用来运行Lighthouse CI。每当有代码变更被推送到 GitHub 仓库的任何分支时，都会生成一份新的 Lighthouse 报告。结合状态检查，在每个拉取请求中显示这些结果。

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要运行的版本库。
安装和配置Node
安装所需的npm包
运行Lighthouse CI并将结果上传到临时公共存储中。

提交这些修改并推送到GitHub。如果你正确地执行了上述步骤，将代码推送到GitHub上将会触发运行你刚刚添加的工作流。
要确认Lighthouse CI已经触发，并查看其生成的报告，请进入项目的Actions标签。你应该会看到在你最近的提交下，列出了构建项目和运行Lighthouse CI工作流。

Github "设置 "选项卡截图

你可以从 "行动 "选项卡中导航到与某一提交对应的Lighthouse报告。点击提交，点击Lighthouse CI工作流步骤，然后展开运行Lighthouse CI步骤的结果。

Github "设置 "选项卡截图

你刚刚设置了一个GitHub Action来运行Lighthouse CI。当与GitHub 状态检查结合使用时，这将是最有用的。

设置一个GitHub状态检查

如果配置了状态检查，那么状态检查是出现在每个PR上的消息，通常包括测试结果或构建成功等信息。

Github "设置 "选项卡的截图

下面的步骤介绍如何为Lighthouse CI设置状态检查。

进入 Lighthouse CI GitHub App页面，点击配置。
（可选）如果你是 GitHub 上多个组织的成员，请选择你想使用 Lighthouse CI 的版本库的组织。
如果你想在所有版本库中启用Lighthouse CI，请选择所有版本库；如果你只想在特定版本库中使用Lighthouse CI，请选择只选择版本库，然后选择版本库。然后点击安装和授权。
复制显示的令牌。您将在下一步中使用它。
要添加令牌，请导航到GitHub仓库的设置页面，点击Secrets，然后点击Add a new secret。

Github "设置 "选项卡的截图

将Name字段设置为LHCI_GITHUB_APP_TOKEN，将Value字段设置为上一步复制的令牌，然后点击Add secret按钮。
状态检查就可以使用了。要测试它，请创建一个新的拉取请求，或者向现有的拉取请求推送一个提交。

设置Lighthouse CI服务器

Lighthouse CI服务器提供了一个仪表盘，用于查看Lighthouse的历史报告。它还可以作为Lighthouse报表的长期私有数据存储。

Lighthouse CI服务器仪表盘截图

在Lighthouse CI Server中比较两份Lighthouse报表的截图。

选择要比较的提交次数。
Lighthouse分数在两次提交之间的变化量。
本节只显示两次提交之间变化的指标。
回归的指标会以粉红色高亮显示。
改进的指标用蓝色高亮显示。

Lighthouse CI Server最适合那些喜欢部署和管理自己的基础设施的用户。

关于Lighthouse CI服务器的设置，包括如何使用Heroku和Docker进行部署，请参考以下说明。

了解更多信息

Lighthouse CI GitHub repo

通过www.DeepL.com/Translator （免费版）翻译

[Web翻译]使用Lighthouse CI进行性能监测

概述