Merge pull request #1 from claireqian1007/develop

integrate lighthouse-ci to github CI process

.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/workflows/ci.yml

@@ -0,0 +1,20 @@
+name: CI
+on: [push]
+jobs:
+  lhci:
+    name: Lighthouse
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js 16.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+      - name: npm install, build
+        run: |
+          npm install
+          npm run build
+      - name: run Lighthouse CI
+        run: |
+          npm install @lhci/cli@0.13.x
+          npx lhci autorun

README.md

@@ -1,8 +1,17 @@
-# React + Vite
+# Lighthouse CI
+## Tools
+1. [lighthouse-ci](https://github.com/GoogleChrome/lighthouse-ci/blob/main/docs/configuration.md)
+2. puppeteer
+3. [github action](https://docs.github.com/en/actions/learn-github-actions/essential-features-of-github-actions)
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Steps
+1. define lighthouse ci configuration file - lighthouserc.cjs
+2. define github ci action - .github/workflows/ci.yml
+3. define puppeteer scripts (optional) - puppeteer-script.cjs
 
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Tip Summary
+1. lighthouse-ci mainly used to evaluate the performance of the target urls. If it's needed to evaluate performance of a specific flow or user interaction, should separately set puppeteer test with lighthouse to realize. (Reference: https://github.com/GoogleChrome/lighthouse/blob/main/docs/user-flows.md)
+2. The ```puppeteerScript``` in lighthouse-ci configuration file is used to mainly mock 'auth' step, which will block lighthouse to evaluate the defined target url if it's ignored.
+3. To avoid ```chrome no installed``` error, it's better to install both puppeteer(include chrome installation) and lighthouse globally or locally. Otherwise the chrome path might cannot be returned by puppeteer to lighthouse correctly
+4. puppeteer API ```waitForNavigation``` only support soft navigate (currently)
+5. puppeteer API ```waitForNavigation``` cannot successfully catch navigation in github ci (can do it successfully locally), no clear reason found. An alternative option is to use ```waitForSelector``` to ensure the new page has been successfully loaded before starting lighthouse evaluation.

lighthouserc.cjs

@@ -0,0 +1,47 @@
+module.exports = {
+  ci: {
+    collect: {
+      numberOfRuns: 3, //lighthouse run times to return html
+      startServerCommand: "npm run dev", //start a server
+      url: "http://localhost:5173/home",
+      settings: {
+        onlyCategories: [
+          "performance",
+          "accessibility",
+          "best-practices",
+          "seo",
+        ],
+        skipAudits: ["redirects-http", "uses-http2"],
+      },
+      puppeteerScript: "./puppeteer-script.cjs",
+      puppeteerLaunchOptions: {
+        args: ["--no-sandbox", "--disable-setuid-sandbox"],
+      },
+    },
+    assert: {
+      //fail the build based on the audit results
+      // preset: "lighthouse:recommended", // 包含的东西太多
+      assertions: {
+        "categories:performance": [
+          "warn",
+          { minScore: 0.9, aggregationMethod: "median" },
+        ], //定义不同的数据等级
+        "categories:accessibility": [
+          "warn",
+          { minScore: 0.9, aggregationMethod: "pessimistic" },
+        ],
+        "categories:best-practices": [
+          "warn",
+          { minScore: 0.9, aggregationMethod: "pessimistic" },
+        ],
+        "categories:seo": [
+          "warn",
+          { minScore: 0.9, aggregationMethod: "pessimistic" },
+        ],
+      },
+    },
+    upload: {
+      target: "temporary-public-storage",
+    },
+  },
+};