Travis CI で bundlesize を使用すると、最小限の設定でパフォーマンス バジェットを定義し、開発ワークフローの一部として適用できます。Travis CI は、コードを GitHub に push するたびにクラウドでアプリのテストを行うサービスです。バンドルサイズ テストに合格しない限り、プルリクエストのマージを許可しないようにリポジトリを構成できます。
Bundlesize の GitHub チェックには、メインブランチとのサイズの比較と、サイズが大幅に増加した場合の警告が含まれます。
実際に動作を確認するには、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 でアカウントを登録し、プロフィールの [設定] セクションで GitHub アプリの統合を有効にする必要があります。
アカウントを作成したら、プロフィールの [設定] に移動し、[アカウントを同期] ボタンをクリックして、新しいリポジトリが Travis に表示されていることを確認します。
pull リクエストに bundlesize を投稿できるようにする
Bundlesize がプルリクエストに投稿するには認証が必要であるため、こちらのリンクから Bundlesize トークンを取得して、Travis 構成に保存します。
プロジェクトの Travis ダッシュボードで、[その他のオプション] > [設定] > [環境変数] に移動します。
トークンを値フィールドとして、BUNDLESIZE_GITHUB_TOKEN を名前として、新しい環境変数を追加します。
継続的インテグレーションを開始するために必要な最後のファイルは、Travis CI に何をすべきかを指示する .travis.yml
ファイルです。作業を効率化するために、このファイルはすでにプロジェクトに含まれています。このファイルでは、アプリが NodeJS を使用していることを指定しています。
この手順で設定は完了です。JavaScript が予算を超えると、bundlesize から警告が届きます。最初は問題なくても、新機能を追加していくうちに、キロバイトが積み重なっていく可能性があります。パフォーマンス バジェットの自動モニタリングにより、見落とされることなく安心して使用できます。
試してみる
最初のバンドルサイズ テストをトリガーする
アプリのパフォーマンス バジェットとの比較を確認するには、手順 3 で作成した GitHub リポジトリにコードを追加します。
Glitch で、ツール > Git、インポート、エクスポート > [GitHub にエクスポート] をクリックします。
ポップアップで、GitHub のユーザー名とリポジトリの名前を
username/repo
として入力します。Glitch は、アプリを「glitch」という名前の新しいブランチにエクスポートします。リポジトリのホームページで [New pull request] ボタンをクリックして、新しい pull リクエストを作成します。
プル リクエスト ページに、進行中のステータス チェックが表示されます。
すべてのチェックが完了するまで、それほど時間はかかりません。残念ながら、猫の投票アプリは少し肥大化しており、パフォーマンス バジェットのチェックに合格していません。メイン バンドルは 266 KB、予算は 170 KB です。
最適化
幸い、使用していないコードを削除することで、簡単にパフォーマンスを改善できます。src/index.js
には主に次の 2 つのインポートがあります。
import firebase from "firebase";
import * as moment from 'moment';
アプリは Firebase Realtime Database を使用してデータを保存していますが、データベース以外の多くの機能(認証、ストレージ、メッセージングなど)を含む Firebase パッケージ全体をインポートしています。
この問題を解決するには、アプリに必要なパッケージのみを src/index.js
ファイルにインポートします。
import firebase from "firebase";
import firebase from 'firebase/app';
import 'firebase/database';
テストを再実行
ソースファイルが更新されたため、webpack を実行して新しいバンドル ファイルをビルドする必要があります。
[ツール] ボタンをクリックします。
次に、[コンソール] ボタンをクリックします。コンソールが別のタブで開きます。
コンソールで
webpack
と入力し、ビルドが完了するまで待ちます。[ツール] > [Git、インポート、エクスポート] > [GitHub にエクスポート] から、コードを GitHub にエクスポートします。
GitHub の pull リクエスト ページに移動し、すべてのチェックが完了するまで待ちます。
完了しました。バンドルの新しいサイズは 125.5 KB で、すべてのチェックに合格しています。🎉
Firebase とは異なり、moment ライブラリの一部をインポートすることは簡単ではありませんが、試してみる価値はあります。アプリをさらに最適化する方法については、使用されていないコードを削除する Codelab をご覧ください。
モニタリング
これで、アプリの予算は下回り、すべて正常に動作しています。Travis CI と bundlesize がパフォーマンス バジェットを継続的にモニタリングし、アプリの高速性を維持します。