バンドルのサイズを経時的にモニタリングして、アプリの高速性を維持します。
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 で終了し、ビルドは失敗します。
必要に応じて、bundlesize と Lighthouse を使用してパフォーマンス バジェットを適用することもできます。Angular CLI と Lighthouse のパフォーマンス バジェットの主な違いは、チェックの実行タイミングです。Angular CLI はビルド時にチェックを実行し、本番環境アセットを調べてサイズを確認します。一方、Lighthouse は、デプロイされたバージョンのアプリケーションを開いてアセットサイズを測定します。どちらの方法にも長所と短所があります。Angular CLI が実行するチェックは、単一ディスクの検索であるため、堅牢性は低くなりますが、はるかに高速です。これに対して、Lighthouse の LightWallet は動的に読み込まれたリソースを考慮することで非常に正確なチェックを実行できますが、実行のたびにアプリをデプロイして開く必要があります。
bundlesize は Angular CLI の予算チェックとよく似ています。主な違いは、bundlesize が GitHub のユーザー インターフェースにチェック結果を直接表示できる点です。
まとめ
Angular CLI でパフォーマンス バジェットを設定して、Angular アプリのパフォーマンスが時間の経過とともに低下しないようにします。
- 予算計算ツールを使用するか、組織のプラクティスに沿って、リソースサイズのベースラインを設定します。
projects.[PROJECT-NAME].architect.build.configurations.production.budgets
のangular.json
でサイズ予算を構成する- 予算は、Angular CLI を使用してビルドするたびに自動的に適用されます。
- 継続的インテグレーションの一部として予算モニタリングを導入することを検討してください(Angular CLI でも実現できます)。