搭配 Travis CI 使用 bundlesize

Milica Mihajlija
Milica Mihajlija
X GitHub 首頁

搭配使用 bundlesize 和 Travis CI，您就能以最少的設定定義效能預算，並在開發工作流程中強制執行這些預算。Travis CI 是一項服務，可在您每次將程式碼推送至 GitHub 時，在雲端為應用程式執行測試。您可以設定存放區，讓存放區在通過套件大小測試前，不允許合併提取要求。

Bundlesize 的 GitHub 檢查項目包括與主要分支的大小比較，以及在大小大幅變動時發出警告。

在 GitHub 上檢查 Bundlesize

如要查看實際運作情形，請參考這個內含 webpack 的應用程式，讓您為最愛的貓咪投票。

貓咪投票應用程式

設定效能預算

這個 Glitch 已包含 bundlesize。

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

這個應用程式的主套件位於 public 資料夾中。如要測試其大小，請在 package.json 檔案中加入以下區段：

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

如要讓壓縮的 JavaScript 套件大小低於建議限制，請在 maxSize 欄位中將效能預算設為 170 KB。

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

建立測試指令碼

由於 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 Sync 按鈕

授權在提取要求中發布 bundlesize

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

bundlesize 符記

在專案的 Travis 資訊主頁中，依序前往「More options」>「Settings」>「Environmentvariables」。

在 Travis CI 中新增環境變數

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

最後，您需要啟動持續整合的 .travis.yml 檔案，向 Travis CI 告知該怎麼做。為加快速度，這個檔案已包含在專案中，且指定了應用程式使用 NodeJS。

完成這個步驟後，您就已完成設定，如果 JavaScript 超出預算，bundlesize 就會發出警告。即使一開始一切順利，隨著時間過去，新增功能後，千位元組就會不斷增加。透過自動化成效預算監控功能，您可以放心，因為系統會隨時掌握情況。

立即試用

觸發第一個 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。

無法執行 bundlesize 檢查

最佳化

幸好，只要移除未使用的程式碼，就能輕鬆執行一些簡單的效能最佳化工作。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. 依序前往「Tools」>「Git, Import, and Export」>「Export to GitHub」，將程式碼匯出至 GitHub。

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

已通過 bundlesize 檢查

大功告成！套件的新大小為 125.5 KB，且所有檢查都已通過。🎉

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

監控

應用程式現已在預算之下，一切順利。Travis CI 和 bundlesize 會持續監控效能預算，確保應用程式維持快速。