Travis CI でのバンドルサイズの使用

Travis CIbundlesize を使用すると、最小限の設定でパフォーマンス バジェットを定義し、開発ワークフローの一部として適用できます。Travis CI は、コードを GitHub に push するたびにクラウドでアプリのテストを行うサービスです。バンドルサイズ テストに合格しない限り、プルリクエストのマージを許可しないようにリポジトリを構成できます。

Bundlesize の GitHub チェックには、メインブランチとのサイズの比較と、サイズが大幅に増加した場合の警告が含まれます。

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 CI での GitHub Apps の統合

アカウントを作成したら、プロフィールの [設定] に移動し、[アカウントを同期] ボタンをクリックして、新しいリポジトリが Travis に表示されていることを確認します。

Travis CI の同期ボタン

pull リクエストに bundlesize を投稿できるようにする

Bundlesize がプルリクエストに投稿するには認証が必要であるため、こちらのリンクから Bundlesize トークンを取得して、Travis 構成に保存します。

bundlesize トークン

プロジェクトの Travis ダッシュボードで、[その他のオプション] > [設定] > [環境変数] に移動します。

Travis CI での環境変数の追加

トークンを値フィールドとして、BUNDLESIZE_GITHUB_TOKEN を名前として、新しい環境変数を追加します。

継続的インテグレーションを開始するために必要な最後のファイルは、Travis CI に何をすべきかを指示する .travis.yml ファイルです。作業を効率化するために、このファイルはすでにプロジェクトに含まれています。このファイルでは、アプリが NodeJS を使用していることを指定しています。

この手順で設定は完了です。JavaScript が予算を超えると、bundlesize から警告が届きます。最初は問題なくても、新機能を追加していくうちに、キロバイトが積み重なっていく可能性があります。パフォーマンス バジェットの自動モニタリングにより、見落とされることなく安心して使用できます。

試してみる

最初のバンドルサイズ テストをトリガーする

アプリのパフォーマンス バジェットとの比較を確認するには、手順 3 で作成した GitHub リポジトリにコードを追加します。

  1. Glitch で、ツール > Git、インポート、エクスポート > [GitHub にエクスポート] をクリックします。

  2. ポップアップで、GitHub のユーザー名とリポジトリの名前を username/repo として入力します。Glitch は、アプリを「glitch」という名前の新しいブランチにエクスポートします。

  3. リポジトリのホームページで [New pull request] ボタンをクリックして、新しい pull リクエストを作成します。

プル リクエスト ページに、進行中のステータス チェックが表示されます。

進行中の GitHub チェック

すべてのチェックが完了するまで、それほど時間はかかりません。残念ながら、猫の投票アプリは少し肥大化しており、パフォーマンス バジェットのチェックに合格していません。メイン バンドルは 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 を実行して新しいバンドル ファイルをビルドする必要があります。

  1. [ツール] ボタンをクリックします。

  2. 次に、[コンソール] ボタンをクリックします。コンソールが別のタブで開きます。

  3. コンソールで webpack と入力し、ビルドが完了するまで待ちます。

  4. [ツール] > [Git、インポート、エクスポート] > [GitHub にエクスポート] から、コードを GitHub にエクスポートします。

  5. GitHub の pull リクエスト ページに移動し、すべてのチェックが完了するまで待ちます。

バンドルサイズ チェックに合格しました

完了しました。バンドルの新しいサイズは 125.5 KB で、すべてのチェックに合格しています。🎉

Firebase とは異なり、moment ライブラリの一部をインポートすることは簡単ではありませんが、試してみる価値はあります。アプリをさらに最適化する方法については、使用されていないコードを削除する Codelab をご覧ください。

モニタリング

これで、アプリの予算は下回り、すべて正常に動作しています。Travis CI と bundlesize がパフォーマンス バジェットを継続的にモニタリングし、アプリの高速性を維持します。