feat: lighthouse setting

.github/workflows/lighthouse.yml

@@ -0,0 +1,159 @@
+name: lighthouse
+
+on:
+  workflow_dispatch:
+  pull_request:
+    branches:
+      - "main"
+      - "dev"
+    types:
+      - opened
+      - synchronize
+
+jobs:
+  lighthouseci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository // 저장소 체크아웃
+        uses: actions/checkout@v3
+
+      - name: Install pnpm // pnpm 설치
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9.7.0
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Run Lighthouse CI // Lighthouse 실행
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+        run: |
+          pnpm i -g @lhci/cli
+          lhci autorun || echo "Fail to Run Lighthouse CI!"
+
+      - name: Generate and Upload Lighthouse Report // 레포트 생성
+        env:
+          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
+        run: |
+          lhci collect --additive
+          lhci upload --target=filesystem --outputDir=./lighthouse-reports
+          lhci upload --target=temporary-public-storage
+
+      - name: Format lighthouse score
+        id: format_lighthouse_score
+        uses: actions/github-script@v3
+        with:
+          github-token: ${{secrets.GITHUB_TOKEN}}
+          script: |
+            const fs = require('fs');
+            const path = require('path');
+            const resultsPath = path.join(process.env.GITHUB_WORKSPACE, 'lhci_reports', 'manifest.json');
+            const results = JSON.parse(fs.readFileSync(resultsPath));
+            const totalReports = results.length;
+
+            // best-practices은 문자열로 저장 ( Lighthouse 지표 )
+            const averageScores = {
+              performance: 0,
+              accessibility: 0,
+              'best-practices': 0,
+              seo: 0,
+              pwa: 0
+            };
+
+            // Lighthouse 상세 지표
+            const auditSummaries = {
+            'first-contentful-paint': 0,
+            'largest-contentful-paint': 0,
+            'interactive': 0,
+            'total-blocking-time': 0,
+            'cumulative-layout-shift': 0
+            };
+
+            // 점수 평균
+            results.forEach(result => {
+              const { summary } = result;
+              for (const key in averageScores) {
+                averageScores[key] += summary[key];
+            }
+
+            const details = JSON.parse(fs.readFileSync(result.jsonPath));
+            ['first-contentful-paint', 'largest-contentful-paint', 'interactive', 'total-blocking-time', 'cumulative-layout-shift'].forEach(auditName => {
+              if (details.audits[auditName]) {
+                const auditDetails = details.audits[auditName];
+                  auditSummaries[auditName] += parseFloat(auditDetails.displayValue) || 0;
+                }
+              });
+            });
+
+            // 점수에 따른 색상 표시
+            const formatScore = res => (res >= 90 ? "🟢" : res >= 70 ? "🟠" : "🔴");
+
+            // 상세 지표의 표준 점수에 따른 색상 표시
+            const detailscore = (value, metric) => {
+              switch (metric) {
+              case 'first-contentful-paint':
+                  return value <= 1.8 ? "🟢" : value <= 3 ? "🟠" : "🔴";
+                case 'largest-contentful-paint':
+                  return value <= 2.5 ? "🟢" : value <= 4 ? "🟠" : "🔴";
+                case 'interactive':
+                  return value <= 3.8 ? "🟢" : value <= 7.3 ? "🟠" : "🔴";
+                case 'total-blocking-time':
+                  return value <= 300 ? "🟢" : value <= 600 ? "🟠" : "🔴";
+                case 'cumulative-layout-shift':
+                  return value <= 0.1 ? "🟢" : value <= 0.25 ? "🟠" : "🔴";
+                default:
+                return "🔴"; // Default to red if metric is unknown
+                }
+            };
+
+            let comments = "⚡️ Lighthouse Average Scores Across Reports:\n| Category | Score |\n| --- | --- |\n";
+            Object.keys(averageScores).forEach(key => {
+              const avgScore = Math.round((averageScores[key] / totalReports) * 100);
+              comments += `| ${formatScore(avgScore)}  ${key.replace(/-/g, ' ')} | ${avgScore} |\n`;
+            });
+
+            comments += "\n⚡️ Average Details Across All Reports:\n| Category | Score |\n| --- | --- |\n";
+            Object.keys(auditSummaries).forEach(auditName => {
+              const average = auditSummaries[auditName] / totalReports;
+              const formattedName = auditName.replace(/-/g, ' ');
+              const colorCode = detailscore(average, auditName);
+              const unit = (auditName === 'total-blocking-time' ? 'ms' : auditName === 'cumulative-layout-shift' ? '' : 's')
+              comments += `| ${colorCode}  ${formattedName} | ${average.toFixed(1)}${unit} |\n`;
+                        });
+
+            // PR 전송
+              if (comments && context.issue.number) {
+                const issue_number = context.issue.number;
+                const repo = context.repo.repo;
+                const owner = context.repo.owner;
+                await github.rest.issues.createComment({
+                  owner,
+                  repo,
+                  issue_number,
+                  body: comments
+                });
+              } else {
+              console.log("No PR COMMENT!");
+            }
+
+      - name: comment PR
+        uses: unsplash/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          msg: ${{ steps.format_lighthouse_score.outputs.comments }}

.lighthouserc.js

@@ -0,0 +1,28 @@
+module.exports = {
+  ci: {
+    collect: {
+      startServerCommand: "pnpm run dev", // 서버 실행
+      startServerReadyPattern: "ready on",
+      url: ["http://localhost:3000"], // 실행할 주소
+      numberOfRuns: 3, // 실행 횟수
+      settings: {
+        preset: "desktop",
+      },
+    },
+    upload: {
+      // 레포트 생성
+      target: "filesystem",
+      outputDir: "./lhci_reports",
+      reportFilenamePattern: "%%PATHNAME%%-%%DATETIME%%-report.%%EXTENSION%%",
+    },
+    assert: {
+      // 점수 기준 정리
+      assertions: {
+        "categories:performance": ["warn", { minScore: 0.8 }],
+        "categories:accessibility": ["warn", { minScore: 0.8 }],
+        "categories:best-practices": ["warn", { minScore: 0.8 }],
+        "categories:seo": ["warn", { minScore: 0.8 }],
+      },
+    },
+  },
+}

package.json

@@ -38,6 +38,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
+    "@lhci/cli": "^0.14.0",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",