Angular パフォーマンスチェックリストを翻訳しました

Web 翻訳

5年近く前

モダンWeb担当

酒巻瑞穂

unsafe:

Angular Performance Checklist を邦訳しました。

翻訳後のドキュメントは以下になります。
Angular パフォーマンスチェックリスト

このドキュメントには、Angularアプリケーションのパフォーマンスを向上させるのに役立つ方法の一覧とその詳細が解説されており、大きく分けて２つの章で構成されています。

ネットワークパフォーマンス

主に私たちのアプリケーションのロード時間を改善するための一覧です。これらには待機時間と帯域幅を削減するための方法が含まれています。
この章にあるいくつかのツールはまだ開発中のため、変更される可能性があります。 Angularコアチームは可能な限りアプリケーションのビルドプロセスを自動化しているため、多くの事例が透過的に実行されています。

バンドリング
ミニファイと不要コードの削除
テンプレート中の空白を削除
ツリーシェイキング
ツリーシェイキング可能なプロバイダ
Ahead-of-Time (AoT) コンパイル
圧縮
リソースの事前読込み
リソースの遅延読み込み
デフォルトのルートを遅延読み込みにしない
キャッシング
アプリケーションシェルを使う
サービスワーカーを使う

実行時の最適化

アプリケーション実行時のパフォーマンスを向上させる一覧です。主に変更の検出とレンダリング関連の最適化が含まれます。
この章では、毎秒60フレーム（fps）のスムーズなユーザーエクスペリエンスを提供するために利用できる実践的な方法が含まれています。

enableProdModeを使う
Ahead-of-Time コンパイル
Webワーカー
サーバサイドレンダリング
変更検出
- ChangeDetectionStrategy.OnPush
- Change Detectorの切り離し
- Run outside Angular
純粋なpipeを使う
*ngFor ディレクティブ
- trackByのオプションを使う
- DOM要素を小さくする
テンプレート中の式を最適化する

上記のほとんどの内容はHTTP/1.1 と HTTP/2 の両方に有効です。将来的に適用される可能性のあるプロトコルのバージョンは項目ごとに適宜記載されています。
また、各項目には、その対応に関連したツールの一覧、サンプルコード、参考文献などが提示されていますので、これらを活用して開発フローを自動化したり、処理効率を上げる助けになればと思います。