如何将Lighthouse性能测试接入GitLab CI/CD并实现每月自动运行？

你可以通过GitLab CI/CD流水线轻松接入Lighthouse，实现每月自动执行性能测试并生成可查看的报告，具体步骤如下：

1. 编写基础GitLab CI配置文件 #

在项目根目录创建.gitlab-ci.yml，配置Lighthouse测试任务：

lighthouse-performance-test:
  image: node:20-alpine  # 基于Node.js镜像运行，Lighthouse依赖Node环境
  stage: test  # 可根据你的流水线阶段规划调整
  script:
    - npm install -g lighthouse  # 全局安装Lighthouse CLI工具
    # 运行测试，生成HTML和JSON双格式报告，指定输出路径
    - lighthouse https://你的目标域名.com --output html --output json --output-path ./lighthouse-results
  artifacts:
    paths:
      - ./lighthouse-results.*  # 保存生成的所有报告文件
    expire_in: 30d  # 报告30天后自动清理，可按需修改时长

2. 配置每月定时触发 #

GitLab CI自带定时流水线功能，实现每月自动运行：

• 进入你的GitLab项目，点击左侧菜单「CI/CD」→「Schedules」
• 点击「New schedule」，设置触发时间（比如每月1号凌晨2点），选择要运行的分支后保存
• 若想在YAML中限定仅定时任务触发该测试，可添加rules规则：

lighthouse-performance-test:
  # 保留上述基础配置
  rules:
    - if: $CI_PIPELINE_SOURCE == "schedule"
      when: always
    # 可选：允许在main分支手动触发测试
    - if: $CI_COMMIT_BRANCH == "main"
      when: manual

3. 优化报告与阈值校验（可选） #

如果需要更友好的报告展示和性能卡点校验，可使用Lighthouse CI（lhci）工具：
修改.gitlab-ci.yml的script部分：

script:
  - npm install -g @lhci/cli
  - lhci collect --url https://你的目标域名.com  # 收集性能数据
  - lhci assert  # 校验性能阈值（需配合.lhcirc配置）
  - lhci upload --target filesystem --outputDir ./lhci-report  # 生成可视化静态报告

同时在项目根目录创建.lhcirc配置性能阈值：

{
  "assert": {
    "assertions": {
      "performance-score": ["error", { "minScore": 0.8 }],  # 性能分数低于0.8时流水线失败
      "first-contentful-paint": ["error", { "maxNumericValue": 2000 }]  # 首次内容绘制超过2秒时失败
    }
  }
}

最后更新artifacts的paths为./lhci-report，就能查看更直观的性能分析报告。

内容的提问来源于stack exchange，提问作者Stifa