Dongle-frontend/.github/workflows/performance.yml at main · HubDApp/Dongle-frontend · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
name: Performance budgets

on:
  pull_request:
    branches: [main]
    paths:
      - "dongle/**"
      - ".github/workflows/performance.yml"
  push:
    branches: [main]
    paths:
      - "dongle/**"
      - ".github/workflows/performance.yml"

concurrency:
  group: performance-${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

jobs:
  lighthouse-and-bundles:
    name: Lighthouse CI and bundle size
    runs-on: ubuntu-latest

    defaults:
      run:
        working-directory: ./dongle

    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: "npm"
          cache-dependency-path: "./dongle/package-lock.json"

      - name: Install Chrome
        id: setup-chrome
        uses: browser-actions/setup-chrome@v1

      - name: Install dependencies
        run: npm ci

      - name: Production build
        run: npm run build
        env:
          CI: true

      - name: Check gzipped JS per route (< 200 KB)
        run: npm run test:bundle

      - name: Run Lighthouse CI
        # Asserts: performance > 90, accessibility > 95, best-practices > 90,
        #          FCP < 1800ms, LCP < 2500ms, CLS < 0.1, initial JS < 200KB
        run: npm run test:lighthouse
        env:
          CHROME_PATH: ${{ steps.setup-chrome.outputs.chrome-path }}

      - name: Upload Lighthouse reports
        if: always()
        uses: actions/upload-artifact@v4
        with:
          name: lighthouse-report
          path: dongle/lhci-report
          if-no-files-found: ignore

      - name: Write budget summary
        if: always()
        run: |
          echo "### Performance Budget Results" >> "$GITHUB_STEP_SUMMARY"
          echo "" >> "$GITHUB_STEP_SUMMARY"
          echo "| Metric | Budget | Measured |" >> "$GITHUB_STEP_SUMMARY"
          echo "|--------|--------|----------|" >> "$GITHUB_STEP_SUMMARY"
          echo "| Performance score | ≥ 90 | see Lighthouse report |" >> "$GITHUB_STEP_SUMMARY"
          echo "| Accessibility score | ≥ 95 | see Lighthouse report |" >> "$GITHUB_STEP_SUMMARY"
          echo "| Best practices score | ≥ 90 | see Lighthouse report |" >> "$GITHUB_STEP_SUMMARY"
          echo "| First Contentful Paint | < 1.8 s | see Lighthouse report |" >> "$GITHUB_STEP_SUMMARY"
          echo "| Largest Contentful Paint | < 2.5 s | see Lighthouse report |" >> "$GITHUB_STEP_SUMMARY"
          echo "| Initial JS bundle (gzip) | < 200 KB | see bundle check |" >> "$GITHUB_STEP_SUMMARY"