Frontend Academy · 课时

自动化 Lighthouse 检查

添加 Lighthouse CI GitHub Action，设置性能和无障碍评分阈值，并阻止导致核心网页指标退化的合并。

自动化 Lighthouse 检查 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 4 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

为什么要自动化 Lighthouse？

手动运行 Lighthouse 往往要到很晚才会发现性能回归，通常是在真实用户投诉之后。自动化 Lighthouse CI 会在每个 PR 上运行，在关键指标出现回归时让构建失败，并随时间记录分数趋势。请像对待测试套件一样对待性能。

Lighthouse CI

Google 开源的 Lighthouse CI（lhci）工具集：多次运行 Lighthouse，取中位数，根据阈值进行断言，并上传结果。

npm install -D @lhci/cli

# Run locally:
npx lhci autorun

lighthouserc.json——配置

配置要测试的 URL、运行次数和断言。

// lighthouserc.json
{
  "ci": {
    "collect": {
      "url": [
        "http://localhost:3000",
        "http://localhost:3000/blog",
        "http://localhost:3000/pricing"
      ],
      "numberOfRuns": 5,
      "startServerCommand": "npm run start"
    },
    "assert": {
      "assertions": {
        "categories:performance":   ["error", { "minScore": 0.9 }],
        "categories:accessibility": ["error", { "minScore": 0.95 }],
        "categories:seo":            ["warn", { "minScore": 0.9 }],
        "largest-contentful-paint":  ["error", { "maxNumericValue": 2500 }],
        "total-blocking-time":       ["error", { "maxNumericValue": 200 }],
        "cumulative-layout-shift":   ["error", { "maxNumericValue": 0.1 }]
      }
    },
    "upload": {
      "target": "temporary-public-storage"
    }
  }
}

GitHub Actions 集成

官方的 treosh/lighthouse-ci-action 会在每个 PR 上运行 lhci，并发布状态检查。

# .github/workflows/lighthouse.yml
name: Lighthouse CI
on: [pull_request]
jobs:
  audit:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: '20', cache: 'npm' }
      - run: npm ci && npm run build
      - uses: treosh/lighthouse-ci-action@v11
        with:
          configPath: ./lighthouserc.json
          uploadArtifacts: true
          temporaryPublicStorage: true

多次运行的中位数

Lighthouse 分数会因时序噪声而在不同运行之间产生变化。numberOfRuns: 5 会取中位数，结果足够稳定，可以据此进行断言。运行次数少于 3 次会产生不稳定的结果。

性能预算

除了分数之外，还可以为资源大小和数量设置硬性预算。超出预算时，构建会失败。

// budget.json
[
  {
    "resourceSizes": [
      { "resourceType": "script", "budget": 300 },
      { "resourceType": "image", "budget": 100 }
    ],
    "resourceCounts": [
      { "resourceType": "third-party", "budget": 10 }
    ]
  }
]

// lighthouserc.json:
"collect": {
  "settings": { "budgetsPath": "./budget.json" }
}

Lighthouse CI 服务器

自行托管 LHCI 服务器，以保留历史数据、查看趋势图表并随时间比较分支。或者使用临时公共存储来保存一次性 PR 结果。

测试需要身份验证的页面

使用 Puppeteer 脚本，在 Lighthouse 运行前先登录。

// lighthouserc.json
"collect": {
  "puppeteerScript": "./lighthouse-login.js",
  "url": ["http://localhost:3000/dashboard"]
}

// lighthouse-login.js
module.exports = async (browser, context) => {
  const page = await browser.newPage();
  await page.goto('http://localhost:3000/login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'test123');
  await page.click('button[type=submit]');
  await page.waitForNavigation();
};

Slack/Discord 通知

将 LHCI 结果发送到团队聊天中——性能回归应该得到与测试失败同等的重视。

移动端与桌面端

Lighthouse 默认使用移动端配置（慢速 4G + 中端 CPU）。对于桌面端，请设置 preset: 'desktop'。大多数生产应用都应同时进行两种审计——在 CI 中使用独立的作业。

校准阈值

从当前分数开始，将其作为基线。第一天不要让 PR 失败——先记录并发出警告。团队适应这套工作流后，再逐步提高要求。

超越 Lighthouse

Lighthouse 提供的是实验室数据。请结合真实用户监控（RUM）：web-vitals npm 包加上您的分析工具，或 SpeedCurve 和 Calibre 等服务，可以提供真实世界的性能趋势。

快速检查

为什么 Lighthouse CI 通常会取多次运行（例如 5 次）的中位数，而不是只运行一次？

回顾：自动化 Lighthouse

lhci autorun 可与 CI 集成。在 lighthouserc.json 中配置：URL、运行次数（5 次以上）、针对类别和指标的断言以及性能预算。GitHub 使用 treosh/lighthouse-ci-action。自行托管 LHCI 服务器以获取趋势。使用 Puppeteer 脚本测试需要身份验证的页面。同时审计移动端和桌面端。从警告开始，随着时间推移逐步收紧阈值。结合 RUM 才能获得完整视图。

常见问题解答

「自动化 Lighthouse 检查」课时是免费的吗？

是的 — 「自动化 Lighthouse 检查」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「自动化 Lighthouse 检查」这节课中我会学到什么？

添加 Lighthouse CI GitHub Action，设置性能和无障碍评分阈值，并阻止导致核心网页指标退化的合并。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 4 节课，共 4 节。

「自动化 Lighthouse 检查」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy