Lighthouse CI集成实际项目总结

<e^πi+1=0>2025-12-26 10:51

创建项目

bash 复制代码 
mkdir esim-lighthouse-ci
cd esim-lighthouse-ci/
npm init -y

安装依赖

bash 复制代码 
npm install -g @lhci/cli

创建配置文件

bash 复制代码 
touch lighthouserc.js

编写代码

javascript 复制代码 
module.exports = {
    ci: {
      collect: {
        url: ['https://esimnum.com/home'],
        numberOfRuns: 3,
        settings: {
          chromeFlags: '--no-sandbox --disable-dev-shm-usage --headless',
          preset: 'desktop',
        },
      },
      assert: {
        assertions: {
          'categories:performance': ['error', { minScore: 0.3 }],
          'categories:accessibility': ['warn', { minScore: 0.3 }],
        },
      },
      upload: {
        target: 'temporary-public-storage',
      },
    },
  };
json 复制代码 
{
  "name": "esim-lighthouse-ci",
  "version": "1.0.0",
  "description": "Lighthouse CI tests for esimnum.com",
  "main": "index.js",
  "scripts": {
    "test": "lhci autorun --config=lighthouserc.js",
    "test:ci": "LHCI_BUILD_CONTEXT__CURRENT_HASH=github-actions lhci autorun --config=lighthouserc.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "type": "commonjs",
  "dependencies": {
    "@lhci/cli": "^0.15.1"
  }
}

本地测试

bash 复制代码 
lhci autorun --config=lighthouserc.js

执行日志

html报告

关于上传报告Error解决方案

方案1：在Git仓库运行

bash 复制代码 
git init
git add .
git commit -m "init"
lhci autorun --config=lighthouserc.js

方案2：绕过Git bash

bash 复制代码 
LHCI_BUILD_CONTEXT__CURRENT_HASH=github-actions lhci autorun --config=lighthouserc.js

Github Actions集成

bash 复制代码 
mkdir -p .github/workflows && cd .github/workflows
touch lighthouse.yml

lighthouse.yml

yaml 复制代码 
name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      statuses: write
      checks: write

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: Install Lighthouse CI
        run: npm install -g @lhci/cli

      - name: Run Lighthouse Collect
        run: |
          LHCI_BUILD_CONTEXT__CURRENT_HASH=github-actions \
          lhci collect --config=lighthouserc.js || true

      - name: Run Lighthouse Upload
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          LHCI_BUILD_CONTEXT__CURRENT_HASH=github-actions \
          lhci upload --config=lighthouserc.js 2>&1 | tee upload_output.txt || true

      - name: Display Report URL
        run: |
          REPORT_URL=$(grep -oP 'https://storage\.googleapis\.com/[^\s]+\.html' upload_output.txt | head -1)
          
          if [ -n "$REPORT_URL" ]; then
            echo "## 📊 Lighthouse Report" >> $GITHUB_STEP_SUMMARY
            echo "" >> $GITHUB_STEP_SUMMARY
            echo "🔗 [View Online Report]($REPORT_URL)" >> $GITHUB_STEP_SUMMARY
            echo "" >> $GITHUB_STEP_SUMMARY
            echo "Report includes averages from all runs" >> $GITHUB_STEP_SUMMARY
            echo "✅ Report URL: $REPORT_URL"
          else
            echo "⚠️ No report URL found"
          fi

添加定时任务和飞书通知

yaml 复制代码 
name: Lighthouse CI

on:
  push:
    branches: [main]
  pull_request:
  schedule:
    # 每周三 24:00
    - cron: '0 16 * * 3'

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      statuses: write
      checks: write

    steps:
      - name: Checkout code
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 20

      - name: Install Lighthouse CI
        run: npm install -g @lhci/cli

      - name: Run Lighthouse Collect
        run: |
          LHCI_BUILD_CONTEXT__CURRENT_HASH=github-actions \
          lhci collect --config=lighthouserc.js || true

      - name: Run Lighthouse Upload
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        run: |
          LHCI_BUILD_CONTEXT__CURRENT_HASH=github-actions \
          lhci upload --config=lighthouserc.js 2>&1 | tee upload_output.txt || true

      - name: Display Report URL
        id: report
        run: |
          REPORT_URL=$(grep -oP 'https://storage\.googleapis\.com/[^\s]+\.html' upload_output.txt | head -1)
          
          if [ -n "$REPORT_URL" ]; then
            echo "## 📊 Lighthouse Report" >> $GITHUB_STEP_SUMMARY
            echo "" >> $GITHUB_STEP_SUMMARY
            echo "🔗 [View Online Report]($REPORT_URL)" >> $GITHUB_STEP_SUMMARY
            echo "" >> $GITHUB_STEP_SUMMARY
            echo "Report includes averages from all runs" >> $GITHUB_STEP_SUMMARY
            echo "✅ Report URL: $REPORT_URL"
            echo "report_url=$REPORT_URL" >> $GITHUB_OUTPUT
          else
            echo "⚠️ No report URL found"
            echo "report_url=" >> $GITHUB_OUTPUT
          fi

      - name: Send Feishu Notification
        if: steps.report.outputs.report_url != ''
        continue-on-error: true
        run: |
          FEISHU_WEBHOOK_URL="${{ secrets.FEISHU_WEBHOOK_URL }}"
          REPORT_URL="${{ steps.report.outputs.report_url }}"
          
          if [ -z "$FEISHU_WEBHOOK_URL" ]; then
            echo "⚠️ FEISHU_WEBHOOK_URL not configured, skipping notification"
            exit 0
          fi
          
          # 获取北京时间
          BUILD_TIME=$(TZ='Asia/Shanghai' date '+%Y-%m-%d %H:%M:%S')
          
          curl -X POST "$FEISHU_WEBHOOK_URL" \
            -H 'Content-Type: application/json' \
            -d "{
              \"msg_type\": \"interactive\",
              \"card\": {
                \"header\": {
                  \"title\": {
                    \"content\": \"📊 eSIM Lighthouse CI 报告\",
                    \"tag\": \"plain_text\"
                  },
                  \"template\": \"blue\"
                },
                \"elements\": [
                  {
                    \"tag\": \"div\",
                    \"text\": {
                      \"content\": \"性能测试已完成，点击下方按钮查看详细报告\",
                      \"tag\": \"plain_text\"
                    }
                  },
                  {
                    \"tag\": \"div\",
                    \"text\": {
                      \"content\": \"⏰ **构建时间**: $BUILD_TIME\",
                      \"tag\": \"lark_md\"
                    }
                  },
                  {
                    \"tag\": \"hr\"
                  },
                  {
                    \"tag\": \"action\",
                    \"actions\": [
                      {
                        \"tag\": \"button\",
                        \"text\": {
                          \"content\": \"🔗 查看详细报告\",
                          \"tag\": \"plain_text\"
                        },
                        \"url\": \"$REPORT_URL\",
                        \"type\": \"primary\"
                      }
                    ]
                  }
                ]
              }
            }"
          
          echo "✅ Feishu notification sent"

配置飞书链接

通知结果

相关推荐
xiaotao13119 小时前
第二十一章：CI/CD 最佳实践
前端·ci/cd·vite·前端打包
夜珀2 天前
AtomGit CI/CD流水线全解析
ci/cd
M-Ellen2 天前
从零搭建 Windows + WSL2 + Docker + GitLab CI/CD 完整手册
ci/cd·docker·gitlab
REDcker2 天前
Jenkins 开源 CI/CD 平台概览与版本演进
ci/cd·开源·jenkins
独断万古他化6 天前
AI 赋能自动化测试实战：从用例生成到 CI/CD 全流程落地
人工智能·ci/cd·测试
郝学胜-神的一滴8 天前
CMake赋能持续集成｜自动化测试落地的进阶指南 ✨
c++·ci/cd·软件工程·软件构建
AI成长日志9 天前
【GitHub开源项目】Harness CI/CD平台深度解析：架构设计、核心功能与实战指南
ci/cd·开源·github
清水白石0089 天前
Python 项目 CI/CD 信心模型：证据驱动部署，从“勇敢上线”到“零风险发版”实战指南
驱动开发·python·ci/cd
alan07219 天前
【持续集成、持续交付】jenkins实现CI/CD
运维·ci/cd·jenkins
龙智DevSecOps解决方案9 天前
TESSY v5.1 新功能详解 ：引入 Hyper Coverage 与基于变更的测试，大幅缩短 CI 测试时间
自动化测试·软件测试·ci/cd·单元测试·嵌入式开发·tessy
热门推荐
01GitHub 镜像站点02一周AI热点速览（2026.03.31-04.06）：GPT-6曝光、谷歌开源Gemma 4、资本狂飙与模型军备竞赛03基于 Docker 部署 Hermes Agent 并接入飞书机器人的完整指南04OpenClaw 请求超时 llm request timed out 怎么解决？3 种方案实测，附完整排查流程05VMware Workstation Pro 17 虚拟机完整安装教程（2026最新）06CodeBuddy与WorkBuddy深度对比：腾讯两款AI工具差异及实操指南07实测！Gemma 4 成功跑在安卓手机上：离线 AI 助手终于来了08Oh My Codex 快速使用指南09AI Weekly | 2026年4月第二周 · GitHub热门项目与AI发展趋势深度解析10开发者环境配置：用 Ollama 实现本地大模型部署(附下载慢的解决方案