將套裝組合與 TravisCI 搭配使用，讓您以最低限度設定效能預算，並在開發工作流程中強制執行這些預算。Travis CI 是一項服務，會在您每次將程式碼推送至 GitHub 時，在雲端執行應用程式測試。您可以設定存放區，這樣就能在通過 Bundlesize 測試的情況下，禁止合併提取要求。
Bundlesize 的 GitHub 檢查包括與主要分支版本的大小比較，並在大小出現大幅跳動時顯示警告。
如果想看看實際運作情形，歡迎使用這個包含 Webpack 的應用程式套件，讓您投票支持喜愛的小貓。
設定效能預算
這個 Glitch 已包含套件。
- 按一下「Remix to Edit」，讓專案可供編輯。
這個應用程式的主要套件位於公用資料夾中。如要測試檔案大小，請在 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 中註冊帳戶，並在設定檔的「設定」區段下啟用 GitHub 應用程式整合。
擁有帳戶後，請前往設定檔下方的「Settings」(設定)，按一下「Sync account」(同步處理帳戶) 按鈕，然後確認 Travis 中列出了新的存放區。
授權 bundlesize 以便在提取要求時發布
Bundlesize 需要授權才能針對提取要求發布，因此請前往這個連結取得要儲存在 Travis 設定的 Bundlesize 權杖。
在專案的 Travis 資訊主頁中，依序前往「More options」>「Settings」>「Environmentvariables」。
新增使用權杖做為值欄位的環境變數，並以「BUNDLESIZE_GITHUB_TOKEN」做為名稱。
最後，如要啟動持續整合，.travis.yml 檔案會指示 Travis CI 該如何執行。為了加快作業速度，該檔案已包含在專案中，並且會指定應用程式使用 NodeJS。
這個步驟即可完成設定，如果 JavaScript 超出預算， bundlesize 會顯示警告。即使一開始是很棒的情況 隨著加入新功能的出現透過自動效能預算監控功能，您絕不會錯過任何曝光機會。
立即體驗
觸發第一個套件大小測試
如要查看應用程式與效能預算相比的結果，請將程式碼新增至您在步驟 3 建立的 GitHub 存放區。
在 Glitch 上，依序點選「工具」 >「Git、匯入和匯出」 >「匯出至 GitHub」。
在彈出式視窗中，輸入您的 GitHub 使用者名稱和存放區名稱
username/repo。Glitch 會將應用程式匯出至名為「glitch」的新分支版本。按一下存放區首頁上的 [NewPull request] (新增提取要求) 按鈕，建立新的提取要求。
現在提取要求頁面會顯示執行中的狀態檢查。
完成所有檢查後，不會花費太多時間。很抱歉，貓咪投票應用程式有點複雜，因此無法通過效能預算檢查。主要組合為 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 才能建構新的套件檔案。
按一下「工具」按鈕。
接著按一下「Console」按鈕。即可在另一個分頁中開啟控制台。
在控制台中輸入
webpack，並等待其完成建構。依序點選「Tools」 >「Git, Import and Export」 >「Export to GitHub」，將程式碼匯出至 GitHub。
前往 GitHub 的提取要求頁面，並等待所有檢查完成。
大功告成！組合的新大小為 125.5 KB，且所有檢查都通過。🎉
與 Firebase 不同，匯入時刻程式庫部分並不容易，但也非常值得一試。如要瞭解如何進一步最佳化應用程式，請參閱「移除未使用的程式碼」程式碼研究室。
監控
應用程式現已用盡，一切正常。Travis CI 和 bundlesize 會持續監控效能預算，確保應用程式運作快速。