Angular パフォーマンスチェックリストを翻訳しました
5年以上前
モダンWeb担当
酒巻 瑞穂
Angular Performance Checklist を邦訳しました。
翻訳後のドキュメントは以下になります。
Angular パフォーマンスチェックリスト
このドキュメントには、Angularアプリケーションのパフォーマンスを向上させるのに役立つ方法の一覧とその詳細が解説されており、大きく分けて2つの章で構成されています。
ネットワークパフォーマンス
主に私たちのアプリケーションのロード時間を改善するための一覧です。これらには待機時間と帯域幅を削減するための方法が含まれています。
この章にあるいくつかのツールはまだ開発中のため、変更される可能性があります。
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 の両方に有効です。 将来的に適用される可能性のあるプロトコルのバージョンは項目ごとに適宜記載されています。
また、各項目には、その対応に関連したツールの一覧、サンプルコード、参考文献などが提示されていますので、
これらを活用して開発フローを自動化したり、処理効率を上げる助けになればと思います。