Lighthouse CI 使用指南

1. 项目介绍

Lighthouse CI 是一个由 Google Chrome 团队开发的工具集，旨在简化在持续集成（CI）过程中使用 Lighthouse 的流程。Lighthouse 是一个开源的自动化工具，用于提高网页质量，它提供了多种网页性能指标，包括性能、可访问性、最佳实践、SEO 和 PWA（渐进式 Web 应用）。

Lighthouse CI 的主要功能包括：

• 在每次提交时自动运行 Lighthouse。
• 防止性能和可访问性等方面的回归。
• 跟踪性能指标和 Lighthouse 评分随时间的变化。
• 设置和维护脚本和图像的性能预算。
• 多次运行 Lighthouse 以减少结果的方差。
• 比较两个版本的网站，找出资源改进和回归。

2. 项目快速启动

2.1 安装 Lighthouse CI CLI

首先，你需要全局安装 Lighthouse CI 命令行工具：

npm install -g @lhci/cli

2.2 配置 lighthouserc.js

在你的项目根目录下创建一个 lighthouserc.js 文件，并添加以下基本配置：

module.exports = {
  ci: {
    collect: {
      staticDistDir: './public', // 如果你的站点是静态的
      // startServerCommand: 'npm start', // 如果你的站点需要启动服务器
      url: ['http://localhost:8080'], // 需要测试的 URL
    },
    upload: {
      target: 'temporary-public-storage', // 将报告上传到临时公共存储
    },
  },
};

2.3 运行 Lighthouse CI

在你的终端中运行以下命令来启动 Lighthouse CI：

lhci autorun

2.4 配置 GitHub Actions

在你的项目根目录下创建 .github/workflows/lighthouse-ci.yml 文件，并添加以下内容：

name: CI
on: [push]
jobs:
  lighthouseci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm install && npm install -g @lhci/cli@0.14.x
      - run: npm run build
      - run: lhci autorun

3. 应用案例和最佳实践

3.1 防止性能回归

通过在 CI 流程中集成 Lighthouse CI，你可以在每次代码提交时自动运行 Lighthouse，并生成性能报告。如果某个提交导致性能下降，CI 流程将会失败，从而防止性能回归。

3.2 设置性能预算

Lighthouse CI 允许你设置性能预算，例如限制 JavaScript 和 CSS 文件的大小。如果某个提交超出了预算，CI 流程将会失败，从而确保你的项目始终保持在性能预算之内。

3.3 跟踪性能指标

通过 Lighthouse CI 服务器，你可以跟踪性能指标和 Lighthouse 评分随时间的变化。这有助于你了解项目的性能趋势，并及时发现性能问题。

4. 典型生态项目

4.1 Lighthouse CI GitHub Action

这是一个由社区维护的 GitHub Action，可以自动在每次 PR 时运行 Lighthouse CI，无需任何基础设施。

4.2 Lighthouse CI Starter Example

这是一个最小化的示例项目，你可以将其用作模板来开始使用 Lighthouse CI。它提供了一个使用 create-react-app 的初学者友好指南。

4.3 社区指南

社区中有许多关于如何使用 Lighthouse CI 的博客文章、教程和指南。例如：

• Integrate Lighthouse CI for static website generator - 介绍如何将 Lighthouse CI 与静态网站生成器（如 Gatsby、Jekyll 等）集成。
• Automating Google Lighthouse audits and uploading results to Azure - 介绍如何配置 Lighthouse CI 以在本地和 Azure 中运行，并将结果上传到 Lighthouse CI 服务器。

通过这些资源，你可以更深入地了解如何使用 Lighthouse CI 来提升你的项目性能。