Lighthouse CI Action 使用教程

Lighthouse CI Action 使用教程

lighthouse-ci-action Audit URLs using Lighthouse and test performance with Lighthouse CI. 项目地址: https://gitcode.com/gh_mirrors/li/lighthouse-ci-action

1. 项目介绍

Lighthouse CI Action 是一个 GitHub Actions 插件，旨在将 Lighthouse CI 集成到 GitHub Actions 环境中。通过这个插件，用户可以轻松地进行 Lighthouse 性能测试，查看测试失败的结果，上传测试报告，并支持并行运行测试任务。该项目由 Treo 和 Google 联合开发，并得到了众多开源贡献者的支持。

2. 项目快速启动

2.1 安装与配置

首先，确保你已经有一个 GitHub 仓库，并且已经配置了 GitHub Actions。接下来，按照以下步骤进行配置：

1. 在你的 GitHub 仓库中，创建一个新的 .github/workflows 目录（如果还没有的话）。
2. 在 .github/workflows 目录下创建一个新的 YAML 文件，例如 lighthouse-ci.yml。

2.2 配置 GitHub Actions

在 lighthouse-ci.yml 文件中，添加以下内容：

name: Lighthouse CI

on: [push, pull_request]

jobs:
  lighthouse-ci:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Run Lighthouse CI
        uses: treosh/lighthouse-ci-action@v12
        with:
          urls: |
            https://example.com
            https://example.com/about
          budgetPath: ./lighthouse/budget.json
          uploadArtifacts: true

2.3 配置性能预算

在项目根目录下创建一个 lighthouse/budget.json 文件，并添加以下内容：

{
  "performance": 0.99,
  "accessibility": 0.98,
  "best-practices": 1,
  "seo": 0.96,
  "pwa": 0.71
}

2.4 提交并运行

将上述配置文件提交到 GitHub 仓库后，每次推送代码或提交 Pull Request 时，GitHub Actions 都会自动运行 Lighthouse CI 测试，并生成相应的报告。

3. 应用案例和最佳实践

3.1 应用案例

• Web 性能监控：通过 Lighthouse CI Action，开发团队可以在每次代码提交时自动进行性能测试，确保网站的性能始终保持在最佳状态。
• 持续集成：将 Lighthouse CI 集成到 CI/CD 流程中，确保每次发布的新版本都符合性能标准。

3.2 最佳实践

• 定期检查性能：建议定期检查 Lighthouse 报告，及时发现并解决性能问题。
• 设置合理的性能预算：根据项目的实际情况，设置合理的性能预算，确保网站的性能始终在可接受范围内。

4. 典型生态项目

• Lighthouse：Google 开发的用于评估网页性能、可访问性、最佳实践等的工具。
• GitHub Actions：GitHub 提供的自动化工作流工具，支持自定义 CI/CD 流程。
• Treo：一个专注于 Web 性能监控的公司，与 Google 合作开发了 Lighthouse CI Action。

通过以上步骤，你可以轻松地将 Lighthouse CI 集成到你的 GitHub Actions 工作流中，实现自动化的性能测试和监控。

lighthouse-ci-action Audit URLs using Lighthouse and test performance with Lighthouse CI. 项目地址: https://gitcode.com/gh_mirrors/li/lighthouse-ci-action