Angular CLI を使用したパフォーマンス バジェット

バンドルのサイズを経時的にモニタリングして、アプリの高速性を維持します。

Minko Gechev

Angular アプリケーションを最適化することは重要ですが、時間の経過とともにパフォーマンスが低下しないようにするにはどうすればよいでしょうか。パフォーマンス指標を導入し、コード変更ごとにモニタリングすることで、

重要な指標の 1 つは、アプリケーションに同梱される JavaScript のサイズです。各ビルドまたは pull リクエストでモニタリングするパフォーマンス バジェットを導入することで、最適化を長期にわたって維持できます。

パフォーマンス予算を計算する

こちらのオンライン バジェット計算ツールを使用すると、目指すインタラクティブになるまでの時間に応じて、アプリが読み込むことができる JavaScript の量を見積もることができます。

予算計算ツール

Angular CLI でパフォーマンス バジェットを構成する

ターゲット JavaScript 予算を設定したら、Angular コマンドライン インターフェース（CLI）を使用して適用できます。動作を確認するには、GitHub のこちらのサンプルアプリをご覧ください。

angular.json で次の予算が構成されていることがわかります。

"budgets": [{
  "type": "bundle",
  "name": "main",
  "maximumWarning": "170kb",
  "maximumError": "250kb"
}]

指定内容の概要は次のとおりです。

  • main という JavaScript バンドルの予算があります。
  • main バンドルが 170 KB を超えると、アプリをビルドするときに Angular CLI からコンソールに警告が表示されます。
  • main バンドルが 250 KB を超えると、ビルドは失敗します。

次に、ng build --prod を実行してアプリをビルドしてみましょう。

コンソールに次のようなエラーが表示されます。

予算の不具合

ビルドエラーを修正するには、rxjs/internal/operators からのインポートを含む app.component.ts を確認します。これは、rxjs の使用者が使用することを想定していない非公開のインポートです。バンドルサイズが大幅に増加します。正しいインポート（rxjs/operators）に更新してビルドを再度実行すると、予算チェックに正常に合格します。

Angular CLI ではデフォルトで差分読み込みが有効になっているため、ng build コマンドを実行すると、アプリの 2 つのビルドが生成されます。

  • ECMAScript 2015 をサポートするブラウザ向けのビルド。このビルドには、ポリフィルが少なく、よりモダンな JavaScript 構文が含まれています。この構文は表現力が高く、バンドルが小さくなります。
  • ECMAScript 2015 をサポートしていない古いブラウザ向けのビルド。古い構文は表現力が低く、ポリフィルをより多く必要とするため、バンドルが大きくなります。

サンプルアプリの index.html ファイルは両方のビルドを参照しているため、最新のブラウザでは小さい ECMAScript 2015 ビルドを、古いブラウザでは ECMAScript 5 ビルドをフォールバックできます。

継続的インテグレーションの一環として予算を適用する

継続的インテグレーション（CI）を使用すると、アプリの予算を経時的にモニタリングできます。幸い、Angular CLI でアプリをビルドすれば、追加の手順なしでこの設定をすばやく行うことができます。JavaScript バンドルが予算を超えると、プロセスはコード 1 で終了し、ビルドは失敗します。

必要に応じて、bundlesize と Lighthouse を使用してパフォーマンス バジェットを適用することもできます。Angular CLI と Lighthouse のパフォーマンス バジェットの主な違いは、チェックの実行タイミングです。Angular CLI はビルド時にチェックを実行し、本番環境アセットを調べてサイズを確認します。一方、Lighthouse は、デプロイされたバージョンのアプリケーションを開いてアセットサイズを測定します。どちらの方法にも長所と短所があります。Angular CLI が実行するチェックは、単一ディスクの検索であるため、堅牢性は低くなりますが、はるかに高速です。一方、Lighthouse の LightWallet は、動的に読み込まれたリソースを考慮して非常に正確なチェックを行うことができますが、実行するたびにアプリをデプロイして開く必要があります。

bundlesize は Angular CLI の予算チェックと非常によく似ています。主な違いは、bundlesize では GitHub のユーザー インターフェースにチェック結果を直接表示できることです。

まとめ

Angular CLI でパフォーマンス バジェットを設定して、Angular アプリのパフォーマンスが時間の経過とともに低下しないようにします。

  1. 予算計算ツールを使用するか、組織のプラクティスに沿って、リソースサイズのベースラインを設定します。
  2. projects.[PROJECT-NAME].architect.build.configurations.production.budgets の angular.json でサイズ予算を構成する
  3. 予算は、Angular CLI を使用してビルドするたびに自動的に適用されます。
  4. 継続的インテグレーションの一部として予算モニタリングを導入することを検討してください（Angular CLI でも実現できます）。