將套裝組合與 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 會持續監控效能預算,確保應用程式運作快速。