性能监控：Lighthouse CI自动化评分

Lighthouse CI 核心概念

Lighthouse CI 是 Google 推出的开源工具，用于将 Lighthouse 性能审计集成到持续集成（CI）流程中，自动化监控网页性能、可访问性、SEO 等指标。通过预设阈值和基线对比，确保代码变更不会导致性能退化。

---

配置 Lighthouse CI 的步骤

安装依赖
在项目中安装 @lhci/cli：

npm install -g @lhci/cli
# 或本地安装
npm install --save-dev @lhci/cli

基础配置文件
创建 lighthouserc.js 文件，定义审计目标和阈值：

module.exports = {
  ci: {
    collect: {
      staticDistDir: './dist', // 针对构建后的静态文件
      url: ['http://localhost:3000'], // 或动态URL列表
      numberOfRuns: 3, // 每次测试的采样次数
    },
    assert: {
      assertions: {
        'categories:performance': ['error', { minScore: 0.9 }],
        'categories:accessibility': ['warn', { minScore: 0.95 }],
      },
    },
    upload: {
      target: 'temporary-public-storage', // 结果存储方式
    },
  },
};

集成到 CI 流程
在 GitHub Actions 或 GitLab CI 中添加步骤示例（GitHub Actions）：

- name: Run Lighthouse CI
  run: |
    npm install
    npm run build
    lhci autorun

---

关键指标与优化方向

性能评分（Performance）

• 首次内容绘制（FCP）：优化关键CSS和字体加载。
• 最大内容绘制（LCP）：优先加载关键图片/视频资源，使用 preload。
• 交互时间（TTI）：减少JavaScript主线程阻塞，代码拆分。

SEO 与可访问性

• 确保 alt 属性完整，ARIA 标签正确。
• 移动端适配，避免视窗配置错误。

---

结果分析与可视化

本地报告生成
运行后通过 lhci server 启动本地服务器查看详细结果：

lhci autorun --upload.target=filesystem --collect.staticDistDir=./dist

长期监控方案

• 使用 Lighthouse CI Server 持久化存储历史数据。
• 集成到 BigQuery 或 Data Studio 进行趋势分析。

---

常见问题解决

分数波动处理

• 增加 numberOfRuns 减少随机误差。
• 设置基线分支对比：lhci autorun --compareWithBranch=main。

动态内容审计
通过 Puppeteer 脚本模拟登录等交互：

collect: {
  puppeteerScript: './scripts/lhci-login.js',
}

通过以上步骤，可实现自动化性能卡点，确保每次提交符合预期标准。