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

Milica Mihajlija

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

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

GitHub の bundlesize チェック

実際に動作を確認するには、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 Sync] ボタン

pull リクエストへの送信を bundlesize に許可

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

bundlesize トークン

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

Travis CI での環境変数の追加

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

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

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

試してみる

最初のセットサイズ テストをトリガーする

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

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

  2. ポップアップで、GitHub ユーザー名とリポジトリ名（username/repo）を入力します。Glitch は、アプリを「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. 次に、[コンソール] ボタンをクリックします。別のタブでコンソールが開きます。

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

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

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

セットサイズ チェックに合格しました

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

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

モニタリング

現在、アプリは予算内に収まっており、すべて順調です。Travis CI と bundlesize を使用してパフォーマンス バジェットを継続的にモニタリングし、アプリの速度を維持します。