把 Lighthouse 搬进 CI/CD：前端性能自动化体检与卡点拦截实践

npm install -D @lhci/cli

module.exports = {
  ci: {
    collect: {
      // 本地静态构建产物服务，LHCI 会自动帮你启动一个静态 server
      staticDistDir: './dist',
      // 测试的页面路由
      url: ['http://localhost/index.html', 'http://localhost/about.html'],
      // 测 3 次取中位数，消除 CI 机器波动误差（效率秘籍！）
      numberOfRuns: 3,
      settings: {
        // 模拟移动端还是桌面端
        preset: 'desktop', 
      },
    },
    assert: {
      assertions: {
        // 核心性能指标断言：低于 0.9 分直接报错打断 CI
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['warn', { minScore: 0.95 }],
        'categories:best-practices': ['warn', { minScore: 0.9 }],
        'categories:seo': ['warn', { minScore: 0.9 }],
        
        // 单项 Core Web Vitals 阈值控制 (LCP, CLS, FID)
        'largest-contentful-paint': ['error', { maxNumericValue: 2500 }], // LCP 必须在 2.5s 内
        'cumulative-layout-shift': ['error', { maxNumericValue: 0.1 }],   // CLS 必须小于 0.1
      },
    },
    upload: {
      // 临时将报告上传到 Google 的临时公开存储（适合开源项目/Demo）
      // 企业级推荐部署私有的 lhci server
      target: 'temporary-public-storage',
    },
  },
};

name: Performance Automated Audit

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  lhci:
    name: Lighthouse CI
    runs-on: ubuntu-latest

    steps:
      - name: 检出代码
        uses: actions/checkout@v4

      - name: 设置 Node.js 环境
        uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'

      - name: 安装依赖
        run: npm ci

      - name: 构建生产产物
        run: npm run build

      - name: 运行 Lighthouse CI 性能体检
        run: |
          npm install -g @lhci/cli
          lhci autorun
        env:
          # 如果配置了 Lighthouse CI GitHub App，可以填入 token 实现 PR 自动评论
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}