@defer と遅延読み込みによる Angular パフォーマンスの向上

導入

Angular の新しい @defer 機能は、特に遅延読み込みとレンダリングの最適化におけるパフォーマンスを向上させるフレームワークの機能強化の一部です。ここでは、@defer 機能と @placeholder および @loading ブロックの概要を示します。

@deferの概要

目的

• @defer 機能は、コンポーネントまたはアプリケーションの一部の読み込みとレンダリングを、必要になるまで遅らせるように設計されています。これにより、アプリケーションの初期読み込み時間が大幅に短縮され、ユーザー エクスペリエンスが向上します。

使用法

• @defer をコンポーネントまたはテンプレートの一部に適用して、遅延ロードする必要があることを示すことができます。これは、ユーザーが最初にページにアクセスしたときにすぐには表示されない、または必要ではない大規模なアプリケーションやアプリケーションのセクションに特に役立ちます。

構文

• @defer を使用するための構文は簡単で、Angular の既存のテンプレート構文とシームレスに統合されます。以下にその使用例を示します。

  @defer {
  <large-component />
  }

利点

• パフォーマンスの最適化: アプリケーションの特定部分の読み込みを延期することで、初期読み込み時間が短縮され、より高速で応答性の高いユーザー エクスペリエンスが実現します。
• リソース管理: コンポーネントのロードを延期すると、リソースは必要な場合にのみ使用されるため、リソース管理が向上します。
• ユーザー エクスペリエンス: 重要なコンテンツを最初に読み込み、重要性の低いコンテンツは必要になるまで延期することで、ユーザー エクスペリエンスを向上させます。

Angular のエコシステムとの統合

• @defer 機能は他の Angular 機能やツールとうまく統合されており、開発者は遅延読み込み、変更検出戦略、その他のパフォーマンス最適化手法を一貫した方法で利用できます。

今後の展望

• Angular が進化し続けるにつれて、@defer 機能はさらに強化され、最適化される可能性があります。開発者は、アプリケーションの一部をいつどのようにロードしてレンダリングするかをより詳細に制御できることが期待できます。

@defer と IntersectionObserver

@defer は内部で IntersectionObserver API を使用します。この API を使用すると、ターゲット要素と祖先要素またはトップレベル ドキュメントのビューポートとの交差部分の変化を観察できます。コンポーネントがビューポートに入る直前までコンポーネントの読み込みを延期することで、ユーザーが決して見ることのないリソースの読み込みを回避でき、帯域幅と処理能力を節約できます。

IntersectionObserver のその他の利点

初期ロード時間の改善: 必要になるまでコンポーネントを延期することで、アプリケーションの最も重要な部分のみが最初にロードされるようになります。これにより、初期ロード時間が短縮され、アプリケーションの体感的なパフォーマンスが向上し、より速く、より応答性が高く感じられるようになります。 Angular は、延期されるコンポーネントに対して個別のバンドルを作成するため、メイン バンドルのサイズも削減されます。

ユーザー エクスペリエンスの強化: コンテンツが表示される直前にコンテンツを読み込むことで、ユーザー エクスペリエンスがよりスムーズでシームレスになります。この手法は、ユーザーがスクロールするときにコンテンツを読み込むことでアプリケーションの動作が遅くなるのを防ぐことができる、長いスクロールのページに特に役立ちます。

低電力デバイスでのパフォーマンスの向上: 処理能力が限られているデバイスやネットワーク接続が遅いデバイスは、遅延読み込みから大きなメリットを得ることができます。必要なコンポーネントのみをロードすることで、これらのデバイスはアプリケーションをより効率的に処理でき、さまざまなデバイスのユーザーに優れたエクスペリエンスを提供します。

例

オプションを指定せずに @defer を使用する

これは、Angular アプリケーションで @defer を使用する方法を示す例です。まず、画像を読み込むコンポーネントを作成します。スタンドアロン コンポーネントの使用は @defer の要件です。

import { Component } from "@angular/core";

@Component({
  selector: "app-images",
  standalone: true,
  template: `<div style="display: flex; flex-direction: column;">
    @for(image of list; track image) {
    <img [src]="image" width="600" height="400" />
    }
  </div> `,
})
export class ImagesComponent {
  list = Array(5).fill("https://placehold.co/600x400");
}

ここではオプションなしで @defer を使用しています。

<h1>Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
}

生成されたバンドルを見ると、画像コンポーネントに独自のチャンクがあることがわかります。

ページがロードされると、ネットワーク タブで、このバンドルが実行時にロードされることがわかります。

@defer をオプションとともに使用する

ユーザーエクスペリエンスを向上させるために、いくつかのオプションが利用可能です。このセクションでは、それらのいくつかについて説明します。

Using @placeholder

By default, the defer block will render the content when it is visible in the viewport. However, there can be delays, for example, when the components are making HTTP requests. In those scenarios, we can use the @placeholder option. The content used for the placeholder is not lazy loaded. The content in the @placeholder is shown first until the @defer block's contents are ready to render. The placeholder itself comes with an optional argument called minimum. This allows you to set the time to display the content.

Here is how this would look:

<h1>Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
} @placeholder (minimum 500ms) {
<p>Loading Images</p>
}

And here is how this looks:

Using @loading

The @loading block is used to display some content while the content defined in the @defer block is still loading or has started to load. This is different from the @placeholder block, which will appear before the loading starts. This block comes with two optional arguments, after and minimum. Similar to the @placeholder argument, the minimum argument is used to set the time to display the content. The second argument, after, is used to define the waiting time before showing the @loading content.

Here is how this would look:

<h1>Angular Defer Sample Application</h1>
@defer () {
<app-images></app-images>
} @loading (after 1s; minimum 500ms) {
<p>Loading Images</p>
}

While you may not see this properly in the animated GIF, we are telling the block to wait at least 1 second before displaying the @loading content and show it for at least 500 ms.

Conclusion

The @defer feature in Angular is a powerful tool for enhancing performance and user experience by delaying the loading of components until they are needed. By integrating this feature with options like @placeholder and @loading, developers can create more efficient and responsive applications. As Angular continues to evolve, features like @defer will play a crucial role in optimizing resource management and improving application performance across various devices and network conditions.

以上が@defer と遅延読み込みによる Angular パフォーマンスの向上の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。