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

Milica Mihajlija

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

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

GitHub でのバンドルサイズ チェック

実際の動作を確認するには、お気に入りの猫に投票できる webpack がバンドルされたアプリをご覧ください。

猫の投票アプリ

パフォーマンス バジェットを設定する

This Glitch にはすでに bundlesize が含まれています。

  • [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 でアカウントを登録し、プロファイルの [Settings] セクションで GitHub Apps の統合を有効にする必要があります。

Travis CI での GitHub アプリのインテグレーション

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

Travis CI Sync ボタン

bundlesize に pull リクエストへの投稿を承認する

Bundlesize には pull リクエストの送信を許可する必要があるため、こちらのリンクにアクセスして、Travis 構成に格納されるバンドルサイズ トークンを取得してください。

バンドルサイズ トークン

プロジェクトの Travis ダッシュボードで、[More options] > [Settings] > [環境変数] に移動します。

Travis CI への環境変数の追加

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

最後に、継続的インテグレーションを開始するために必要な .travis.yml ファイルは、Travis CI に指示を与えるものです。処理を高速化するために、このファイルはすでにプロジェクトに追加されており、アプリで NodeJS が使用されていることが指定されています。

これで設定は完了です。JavaScript の予算を超過すると、bundlesize に警告が表示されます。使い始めても、新機能を追加するにつれ キロバイトが山積みになることもあります自動化されたパフォーマンス予算モニタリングにより、気づかれないことがないので安心できます。

試してみる

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

アプリがパフォーマンス バジェットに対してどうなっているかを確認するには、ステップ 3 で作成した GitHub リポジトリにコードを追加します。

  1. Glitch で [Tools] > [Git, Import, and Export] > [Export to GitHub] をクリックします。

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

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

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. 次に、[Console]（コンソール）ボタンをクリックします。別のタブでコンソールが開きます。

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

  4. [Tools] > [Git, Import, and Export] > [Export to GitHub] から GitHub にコードをエクスポートします。

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

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

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

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

モニタリング

アプリは予算内に収まり、正常に動作しています。Travis CI と bundlesize はパフォーマンス バジェットを継続的にモニタリングし、アプリの速度を維持します。