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

Milica Mihajlija

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

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

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

実際の動作を確認するには、webpack とバンドルされたアプリで、お気に入りの猫に投票してみましょう。

猫の投票アプリ

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

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

  • [Remix to Edit] をクリックして、プロジェクトを編集可能にします。

このアプリのメインバンドルはパブリック フォルダにあります。サイズをテストするには、package.json ファイルに次のセクションを追加します。

"bundlesize": [
  {
    "path": "./public/*.bundle.js",
    "maxSize": "170 kB"
  }
]

圧縮された JavaScript バンドルのサイズを推奨上限以下に保つには、maxSize フィールドでパフォーマンス バジェットを 170 KB に設定します。

Bundlesize は glob パターンをサポートしています。ファイルパスの * ワイルドカード文字は、public フォルダ内のすべてのバンドル名に一致します。

テスト スクリプトを作成する

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

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

Travis CI の同期ボタン

bundlesize が pull リクエストに投稿することを承認する

Bundlesize がプルリクエストに投稿できるようにするには、承認が必要です。このリンクにアクセスして、Travis 構成に保存される bundlesize トークンを取得します。

bundlesize トークン

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

Travis CI で環境変数を追加する

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

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

これで設定は完了です。JavaScript が予算を超えた場合は、bundlesize から警告が表示されます。最初は問題なくても、新機能を追加していくうちに、キロバイトが積み重なっていくことがあります。パフォーマンス バジェットの自動モニタリングにより、パフォーマンス バジェットが超過しても見逃されることはありません。

試してみる

最初の 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. [Tools] > [Git, Import, and Export] > [Export to GitHub] から、コードを GitHub にエクスポートします。

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

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

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

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

モニタリング

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