Angular パフォーマンス チューニングの 6 つのヒントとコツ

公開: 2023-02-03

Angular は Web アプリケーションを構築するための強力な JavaScript フレームワークですが、アプリケーションが大きくなるにつれて遅くなり、管理が難しくなる可能性があります。 Angular のパフォーマンス チューニングは、Angular アプリをスムーズかつ効率的に実行するための重要な部分です。

この記事では、読み込み時間を改善し、アプリケーションのサイズを縮小し、不要な DOM 更新の数を減らすためのテクニックなど、Angular アプリケーションのパフォーマンスを最適化するためのいくつかのヒントとコツを探ります。 あなたが経験豊富な Angular 開発者であろうと、初心者であろうと、これらのヒントとコツは、アプリケーションのパフォーマンスを改善し、ユーザーにとってスムーズに実行されるようにするのに役立ちます。

それでは、Angular アプリのパフォーマンスを簡単に調整するための主要な手法から始めましょう。

Angular パフォーマンス チューニングのヒント

angular アプリのパフォーマンスを簡単に改善できるさまざまなヒントがあります。 ただし、Angular アプリの最適化に関する 6 つのヒントを紹介します。 はい、どうぞ：

  • AoT コンパイルの使用
  • OnPush 変更検出戦略の使用
  • 純正パイプを使用
  • ngFor での TrackBy の使用
  • コード分​​割
  • ページ読み込みの改善

それぞれについて詳しく学びましょう。

AoT コンパイルの使用

Angular アプリケーションのパフォーマンスを改善するための重要なヒントの 1 つは、Ahead-of-Time (AoT) コンパイルを使用することです。 AoT は、実行時にコンパイルするのではなく、ビルド時に Angular コンポーネントとテンプレートをプリコンパイルする手法です。 これにより、アプリケーションが最初にロードされるときにブラウザがテンプレートとコンポーネントのコンパイルに時間を費やす必要がないため、アプリケーションのロード時間が大幅に短縮されます。

AoT は、JavaScript コード内のテンプレートとコンポーネント ファクトリをインライン化することで、アプリケーションのサイズを縮小するのにも役立ちます。 これにより、アプリケーションのロードに必要なネットワーク リクエストの数が減り、アプリケーションの全体的なサイズが小さくなり、ロード時間の短縮に役立ちます。

Angular アプリケーションで AoT コンパイルを有効にするには、Angular CLI を使用して、「–aot」フラグを指定してアプリケーションをビルドする必要があります。 これにより、アプリケーションの AoT コンパイルが有効になり、結果のビルドのパフォーマンスが最適化されます。 さらに、「ngc」コンパイラなどのツールを直接使用できます。これは、Angular CLI が AoT コンパイルに使用するコマンド ライン ツールです。

OnPush 変更検出戦略を使用する

OnPush 変更検出戦略は、入力プロパティが変更されたとき、またはイベントが発行されたときにのみコンポーネントの変更をチェックすることで、Angular アプリケーションのパフォーマンスを向上させる方法です。 これは、変更検出サイクルがあるたびにコンポーネントとそのすべての子コンポーネントの変更をチェックするデフォルトの「OnPush」戦略とは対照的です。

OnPush 戦略を使用するには、ChangeDetectorRef モジュールをインポートし、コンポーネントの @Component デコレーターの changeDetection プロパティを ChangeDetectionStrategy.OnPush に設定する必要があります。

OnPush は、アプリケーションのパフォーマンスを向上させる強力な戦略ですが、アプリケーションをより複雑にする可能性もあります。 この戦略を実装した後は、アプリケーションを十分にテストして、期待どおりに動作することを確認してください。

純正パイプを使用

Angular の純粋なパイプは、パイプに渡された入力値またはパラメーターに変更があった場合にのみ実行されるパイプです。 これにより、パイプの実行回数が減るため、Angular アプリケーションのパフォーマンスが向上します。

Angular で純粋なパイプを作成するには、パイプの @Pipe デコレータに pure: true プロパティを追加する必要があります。

純粋なパイプを作成する場合、パイプに渡された入力値またはパラメーターが変更された場合にのみ、Angular がパイプを再実行することに注意することが重要です。 パイプが、入力として渡されない他のデータまたは状態に依存している場合、パイプは正しい出力を生成しない可能性があります。

コンポーネント内に OnPush 変更検出戦略を使用する純粋なパイプがある場合、入力またはイベントが発行されたときにのみパイプが実行されることにも注意してください。これにより、アプリケーションのパフォーマンスがさらに向上します。

複雑な関数で純粋なパイプを使用している場合、パイプは入力値が変更されるまで実行されないため、アプリケーションのパフォーマンスに悪影響を及ぼす可能性があることに注意してください。 このような場合は、不純なパイプを使用することをお勧めします。

ngFor での TrackBy の使用

trackBy は、ngFor ループ内の各アイテムに一意の識別子を指定できるようにする Angular の機能です。 これにより、コレクションが変更されたときに作成および破棄する必要がある DOM 要素の数を減らすことで、Angular アプリケーションのパフォーマンスを向上させることができます。

ngFor ループで trackBy を使用するには、関数を trackBy 属性の値として渡す必要があります。 この関数は、現在のアイテムのインデックスとアイテム自体を受け取り、そのアイテムの一意の識別子を返す必要があります。

<div *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</div>

trackByFn(インデックス: 番号, 項目: 任意) {

item.id を返します。

}

この例では、trackByFn 関数は、各アイテムの一意の識別子をその id プロパティとして返しています。

コード分​​割

コード分​​割は、アプリケーションの初期ロード時間を短縮することにより、Angular アプリケーションのパフォーマンスを向上させるために使用される手法です。 これには、アプリケーションのコードを、ユーザーがアプリケーションをナビゲートするときにオンデマンドでロードできる、より小さく管理しやすいチャンクに分割することが含まれます。

これにより、アプリケーションはすべてのコードを一度にロードするのではなく、現在のページに必要なコードのみをロードできるようになり、アプリケーションの初期ロード時間が大幅に短縮されます。 この手法は、Angular Router モジュールと loadChildren プロパティを使用して実装できます。

ページ読み込みの改善

Angular アプリケーションのページ読み込みを改善する方法はいくつかあります。

  1. コード分​​割: 前述のとおり、コード分割は、アプリケーションのコードを必要に応じてロードできる小さなチャンクに分割する技術です。 これにより、アプリケーションの初期ロード時間が大幅に改善されます。
  2. 遅延読み込み: 遅延読み込みは、必要なときにのみモジュールを読み込む手法です。 これは、初期ロード時にロードする必要があるコードの量を減らすことで、アプリケーションの初期ロード時間を改善するのにも役立ちます。
  3. 画像の最適化: 画像を圧縮して適切な画像形式を使用することで画像を最適化すると、ダウンロードする必要がある画像のサイズが減り、ページの読み込みが改善されます。
  4. ブラウザーのキャッシュの使用: ブラウザーのキャッシュを有効にすると、ブラウザーがリソースをローカルに保存できるようになるため、ページの読み込みを改善するのに役立ちます。これにより、リソースを再度ダウンロードする必要がなくなります。

最後の言葉

結論として、Angular は、複雑で高性能な Web アプリケーションの構築に使用できる、強力で用途の広いフレームワークです。 ただし、他のフレームワークと同様に、Angular アプリケーションのパフォーマンスを最適化するために使用できる特定のベスト プラクティスとテクニックがあります。 コード分​​割、遅延読み込みなどの手法を利用することで、開発者は Angular アプリケーションの読み込み時間と全体的なパフォーマンスを大幅に改善できます。

人気の IT サービス アウトソーシング企業である Smarsh Infotech は、将来のアプリケーション開発パートナーになることができます。 デジタル プラットフォームでビジネスを展開することを計画している場合は、できる限りの方法でお手伝いします。 プロジェクトのアイデアをつなげて話し合いましょう。

また読む: The New Angular 14: すべてを読む