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 で終了し、ビルドは失敗します。

必要に応じて、バンドルサイズと 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 でも実現できます）。