JavaScript >> Javascript 文檔 >  >> JavaScript

在 GitHub 中自動執行性能檢查的最佳方法

我們都想建立快速的網站。但是我們不想在每個構建上手動運行性能檢查。正確的?將性能檢查轉移到持續集成過程中可以消除這種手動審核,並在我們的應用程序的 Web 性能可能下降時提醒我們。在本文中,我們將討論一種使用 Lighthouse、Page Speed Insights 和 GitHub Actions 在 GitHub 項目中自動執行性能檢查的好方法。

燈塔

Google 的 Lighthouse 是一種用於提高網頁質量的開源自動化工具。 Lighthouse 可以使用開發者工具在本地運行,也可以通過 web.dev 遠程運行,並為用戶提供 5 種不同的評分類別。

  • 性能
  • 輔助功能
  • 最佳做法
  • 搜索引擎優化
  • 漸進式網絡應用

給出每個類別的總分以及提高分數的問題和建議。

在 Chrome 開發工具或 web.dev 上運行 Lighthouse 很棒,但為了自動化這個過程,我們需要一個命令行界面 (CLI)。

燈塔 CLI

Google 還提供了一個 CLI,用於在本地計算機或構建服務器上運行 Lighthouse。 CLI 的優點在於它可以針對實時站點或本地構建目錄運行。

在實時網站上運行 Lighthouse CLI

全局安裝後(npm install -g @lhci/cli ) npm 包,我們可以使用 lhci 觸發 Lighthouse 審計的腳本。通過使用 --upload.target--collect.url ,我們可以針對 URL 運行審核,並將 HTML 結果上傳到臨時網頁。

$ lhci autorun --upload.target=temporary-public-storage --collect.url=https://jake.partus.ch
✅  .lighthouseci/ directory writable
⚠️   Configuration file not found
✅  Chrome installation found
Healthcheck passed!

Running Lighthouse 3 time(s) on https://jake.partus.ch
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of https://jake.partus.ch/...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1578972923376-47459.report.html
No GitHub token set, skipping.

Done running autorun.

在本地目錄上運行 Lighthouse CLI

如果未指定 URL,CLI 將嘗試查找靜態構建目錄並將應用程序託管在本地 Web 服務器上。在以下示例中,它能夠確定構建目錄名為 public ,在端口 52259 上託管網站,然後針對本地構建運行審核。

$ lhci autorun --upload.target=temporary-public-storage
✅  .lighthouseci/ directory writable
⚠️   Configuration file not found
✅  Chrome installation found
Healthcheck passed!

Automatically determined ./public as `staticDistDir`.
Set it explicitly in lighthouserc.json if incorrect.

Started a web server on port 52259...
Running Lighthouse 3 time(s) on http://localhost:52259/404.html
Run #1...done.
Run #2...done.
Run #3...done.
Running Lighthouse 3 time(s) on http://localhost:52259/index.html
Run #1...done.
Run #2...done.
Run #3...done.
Done running Lighthouse!

Uploading median LHR of http://localhost:52259/404.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1578972840850-69068.report.html
Uploading median LHR of http://localhost:52259/index.html...success!
Open the report at https://storage.googleapis.com/lighthouse-infrastructure.appspot.com/reports/1578972841932-44445.report.html
No GitHub token set, skipping.

Done running autorun.

頁面速度洞察

Page Speed Insights 是 Google 創建的另一個工具,它將 Lighthouse 性能分數與真實世界的性能數據相結合。

有關通過 Page Speed Insights 獲得的好處和 API 的更深入信息,請閱讀此文👇

Page Speed Insights 僅關注網頁的性能方面。雖然這很有用,但我們應該嘗試同時利用 both Lighthouse 和 Page Speed Insights 以全面了解我們網站的性能和其他特徵。

GitHub 操作

GitHub Actions 現在使用世界一流的 CI/CD,可以輕鬆自動化所有軟件工作流程。直接從 GitHub 構建、測試和部署您的代碼。

GitHub Actions 是 GitHub 的新產品,它允許為您的項目配置自定義 CI/CD 管道。 GitHub Actions 可以針對單個拉取請求運行,無論何時推送代碼,或大量其他事件。

使用 GitHub 操作運行 Lighthouse

這是一個 GitHub Action 腳本示例,用於對每個拉取請求運行審計。要開始,請將以下 yaml 配置放入項目中的文件中 .github/workflows/audit.yml .簽出、安裝和構建腳本可能需要根據應用程序的具體情況進行調整。

name: Performance Audit

on: [pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: Install
        run: |
          npm ci
      - name: Build
        run: |
          npm run build
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/[email protected]
          lhci autorun --upload.target=temporary-public-storage

為集成狀態檢查配置 GitHub 應用程序(可選)

為了獲得集成的 GitHub 狀態檢查,必須安裝和配置 Lighthouse CI GitHub 應用程序。

然後,必須將令牌添加到項目“秘密”中。

最後,可以調整構建腳本以引用秘密。

      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/[email protected]
          lhci autorun --upload.target=temporary-public-storage"
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}

完成所有這些配置後,現在應該由 Lighthouse CI GitHub 應用程序創建狀態檢查。

將 PSI 添加到 GitHub 操作腳本

為了幫助快速輕鬆地運行 PSI 檢查,我創建了一個 GitHub Action 🎉。在以下示例中,我們將 PSI 檢查添加到性能審計腳本的末尾。

name: Performance Audit

on: [pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: Install
        run: |
          npm ci
      - name: Build
        run: |
          npm run build
      - name: Run Lighthouse CI
        run: |
          npm install -g @lhci/[email protected]
          lhci autorun --upload.target=temporary-public-storage
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
      - name: Running Page Speed Insights
        uses: jakepartusch/psi-action@v1
        with:
          url: https://jake.partus.ch

雖然這絕對有用,但我們可能希望針對應用程序的部署預覽運行性能檢查,這樣我們可以確保在之前捕獲性能回歸 我們合併 PR。

與 PR 預覽集成

對於這個例子,我們將使用 Netlify 進行拉取請求部署預覽。配置部署預覽後,Netlify 將在打開 PR 時構建和部署站點。該站點將存在於 URL (deploy-preview-42--yoursitename.netlify.com)。由於部署預覽需要一些時間來處理,我寫了另一個 GitHub Action 🎉 等到預覽 URL 可用。這是使用 GitHub Actions 進行部署預覽性能審計的完整示例。


name: Performance Audit

on: [pull_request]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v1
      - name: Use Node.js 12.x
        uses: actions/setup-node@v1
        with:
          node-version: 12.x
      - name: Install
        run: |
          npm ci
      - name: Build
        run: |
          npm run build
      - name: Waiting for 200 from the Netlify Preview
        uses: jakepartusch/wait-for-netlify-action@v1
        id: waitFor200
        with:
          site_name: "yoursitename"
      - name: Lighthouse CI
        run: |
          npm install -g @lhci/[email protected]
          lhci autorun --upload.target=temporary-public-storage --collect.url=${{ steps.waitFor200.outputs.url }}
        env:
          LHCI_GITHUB_APP_TOKEN: ${{ secrets.LHCI_GITHUB_APP_TOKEN }}
      - name: Running Page Speed Insights
        uses: jakepartusch/psi-action@v1
        with:
          url: ${{ steps.waitFor200.outputs.url }}

結論

現在我們有了一套完整的性能審計套件,可以與 GitHub 中的每個 Pull Request 一起運行💯。要在實踐中查看所有這些內容,請隨時訪問我的個人網站存儲庫。

參考鏈接

燈塔CI
Lighthouse CI GitHub 狀態檢查
Page Speed Insights(庫)
Page Speed Insights GitHub Action(無恥插件)
等待Netlify GitHub Action(無恥插件)


Tutorial JavaScript 教程
  1. 我的第一個 Chrome 擴展程序。

  2. 使用 Near Protocol 和 React.js 構建全棧 NFT 市場第 2 部分

  3. 在畫布上繪製線條時的奇怪形狀(js)

  4. 如何(某種程度上)將代碼添加到 fullcalendar 的 renderEvents 處理程序?

  5. 不要在 JavaScript 中將數組與 ==進行比較

  6. 回到 JS 基礎:對象

  7. 如何在 React 中創建模態

  1. 全棧 Reddit 克隆 - Spring Boot、React、Electron App - 第 1 部分

  2. 解決方案:驗證堆棧序列

  3. Edge,一個為創客和開發者提供動態 API 的開源 NextJS 應用程序。

  4. 正則表達式中的“g”標誌是什麼意思?

  5. Javascript調用嵌套函數

  6. 使用 Hooks 從類遷移到功能組件

  7. Redux 基礎知識

  1. 你不需要 CSS-in-JS:為什麼我使用樣式表

  2. 使用 CRA 的 PWA Expo Web - 從零到部署

  3. 在 javascript 中使用自動密碼生成器創建註冊表單

  4. 使用 GitHub Pages 和 React 創建投資組合網站:第 1 部分