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

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

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

重要な指標の 1 つは、アプリケーションに付属する JavaScript のサイズです。各ビルド リクエストまたは pull リクエストでモニタリングするパフォーマンス バジェットを導入することで、時間の経過とともに最適化が維持されるようにできます。

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

こちらのオンライン予算計算ツールを使用すると、目標とする Time to Interactive に応じて、アプリで読み込める 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 で終了し、ビルドは失敗します。

必要に応じて、bundlesizeLighthouse を使用してパフォーマンス バジェットを適用することもできます。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.budgetsangular.json でサイズ予算を構成する
  3. 予算は、Angular CLI を使用してビルドするたびに自動的に適用されます。
  4. 継続的インテグレーションの一部として予算モニタリングを導入することを検討してください(Angular CLI でも実現できます)。