搭配 Travis CI 使用 bundlesize

Milica Mihajlija
Milica Mihajlija
X GitHub 首頁

搭配 Travis CI 使用 bundlesize，即可定義效能預算，並在開發工作流程中強制執行，設定過程非常簡單。Travis CI 是一項服務，每當您將程式碼推送至 GitHub 時，這項服務就會在雲端執行應用程式測試。您可以設定存放區，只有在通過套件大小測試後，才能合併提取要求。

Bundlesize 的 GitHub 檢查包括與主要分支版本的規模比較，以及在規模大幅增加時發出警告。

GitHub 上的 Bundlesize 檢查

如要查看實際運作情形，請參閱這個與 webpack 搭配使用的應用程式，讓您投票選出最喜歡的小貓。

貓咪投票應用程式

設定效能預算

這個 Glitch 已包含 bundlesize。

  • 按一下「Remix to Edit」，即可編輯專案。

這個應用程式的主要套件位於公開資料夾中。如要測試大小，請在 package.json 檔案中新增下列區段：

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

如要將壓縮後的 JavaScript 組合大小控制在建議限制內，請在 maxSize 欄位中將效能預算設為 170 KB。

Bundlesize 支援 glob 模式，檔案路徑中的 * 萬用字元會比對 public 資料夾中的所有套件名稱。

建立測試腳本

由於 Travis 需要執行測試，請在 package.json 中新增測試腳本：

"scripts": {
  "start": "webpack && http-server -c-1",
  "test": "bundlesize"
}

設定持續整合環境

整合 GitHub 和 Travis CI

首先，在 GitHub 帳戶中為這個專案建立新的存放區，並使用 README.md 初始化。

您必須在 Travis 註冊帳戶，並在個人資料的「Settings」部分啟用 GitHub 應用程式整合功能。

Travis CI 上的 GitHub 應用程式整合

建立帳戶後，請前往個人資料下方的「Settings」，按一下「Sync account」按鈕，確認新存放區已列在 Travis 中。

Travis CI 同步按鈕

授權 bundlesize 在提取要求中發布內容

Bundlesize 需要授權才能在提取要求中發布內容，因此請前往這個連結取得 bundlesize 權杖，並儲存在 Travis 設定中。

bundlesize 權杖

在專案的 Travis 資訊主頁中，依序前往「More options」(更多選項) >「Settings」(設定) >「Environment variables」(環境變數)。

在 Travis CI 中新增環境變數

新增環境變數，並將權杖設為值欄位，名稱則設為 BUNDLESIZE_GITHUB_TOKEN。

啟動持續整合的最後一個步驟是建立 .travis.yml 檔案，告知 Travis CI 要執行的動作。為加快速度，專案中已包含這個檔案，並指定應用程式使用 NodeJS。

完成這個步驟後，您就設定完畢，如果 JavaScript 超出預算，bundlesize 就會發出警告。即使一開始表現良好，隨著時間推移，新增功能可能會導致 KB 數不斷增加。有了自動成效預算監控功能，您就能放心，因為系統會自動監控預算，不會有任何疏漏。

立即試用

觸發第一項 bundlesize 測試

如要瞭解應用程式與效能預算的比較結果，請將程式碼新增至您在步驟 3 中建立的 GitHub 存放區。

  1. 在 Glitch 中，依序點選「Tools」 >「Git, Import, and Export」 >「Export to GitHub」。

  2. 在彈出式視窗中，輸入 GitHub 使用者名稱和存放區名稱，格式為 username/repo。Glitch 會將應用程式匯出至名為「glitch」的新分支。

  3. 按一下存放區首頁上的「New pull request」按鈕，建立新的提取要求。

現在您會在提取要求頁面上看到狀態檢查的進度。

GitHub 檢查正在進行中

所有檢查很快就會完成。很抱歉，貓咪投票應用程式有點臃腫，無法通過效能預算檢查。主要套件為 266 KB，預算為 170 KB。

未通過套件大小檢查

最佳化

幸好，只要移除未使用的程式碼，就能輕鬆提升效能。src/index.js 中有兩個主要匯入項目：

import firebase from "firebase";
import * as moment from 'moment';

應用程式使用 Firebase 即時資料庫儲存資料，但匯入的整個 Firebase 套件不只包含資料庫，還有驗證、儲存空間、訊息等功能。

如要修正這個問題，請在 src/index.js 檔案中只匯入應用程式所需的套件：

import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';

可重新執行測試

由於來源檔案已更新，您需要執行 webpack 來建構新的套件檔案。

  1. 按一下「工具」按鈕。

  2. 然後按一下「控制台」按鈕。控制台會在另一個分頁中開啟。

  3. 在控制台中輸入 webpack，然後等待建構完成。

  4. 依序點選「工具」 >「Git、匯入和匯出」 >「匯出至 GitHub」，將程式碼匯出至 GitHub。

  5. 前往 GitHub 的提取要求頁面，等待所有檢查完成。

通過套件大小檢查

太棒了，套件的新大小為 125.5 KB，且已通過所有檢查。 🎉

與 Firebase 不同，匯入 moment 程式庫的部分內容並不容易，但值得一試。請參閱「移除未使用的程式碼」程式碼研究室，瞭解如何進一步最佳化應用程式。

監控

應用程式現在已符合預算，一切運作正常。Travis CI 和 bundlesize 會持續監控效能預算，確保應用程式維持快速運作。