Améliorer les performances angulaires avec @defer et Lazy Loading

Introduction

La nouvelle fonctionnalité @defer dans Angular fait partie des améliorations du framework visant à améliorer les performances, notamment en matière de chargement paresseux et d'optimisation du rendu. Voici un aperçu rapide de la fonctionnalité @defer et des blocs @placeholder et @loading.

Présentation de @defer

But

• La fonctionnalité @defer est conçue pour retarder le chargement et le rendu des composants ou des parties de l'application jusqu'à ce qu'ils soient nécessaires. Cela peut considérablement améliorer le temps de chargement initial de l'application et améliorer l'expérience utilisateur.

Usage

• @defer peut être appliqué à des composants ou à des parties du modèle pour indiquer qu'ils doivent être chargés paresseusement. Cela peut être particulièrement utile pour les applications volumineuses ou les sections d'une application qui ne sont pas immédiatement visibles ou nécessaires lorsque l'utilisateur arrive pour la première fois sur une page.

Syntaxe

• La syntaxe d'utilisation de @defer est simple et s'intègre parfaitement à la syntaxe des modèles existants d'Angular. Voici un exemple de la façon dont il pourrait être utilisé :

  @defer {
  <large-component />
  }

Avantages

• Optimisation des performances : en différant le chargement de certaines parties de l'application, le temps de chargement initial peut être réduit, conduisant à une expérience utilisateur plus rapide et plus réactive.
• Gestion des ressources : différer le chargement des composants contribue à une meilleure gestion des ressources, car les ressources ne sont utilisées que lorsque cela est nécessaire.
• Expérience utilisateur : il améliore l'expérience utilisateur en chargeant d'abord le contenu critique et en différant le contenu moins critique jusqu'à ce qu'il soit nécessaire.

Intégration avec l'écosystème d'Angular

• La fonctionnalité @defer s'intègre bien à d'autres fonctionnalités et outils Angular, permettant aux développeurs de profiter du chargement paresseux, des stratégies de détection des modifications et d'autres techniques d'optimisation des performances de manière cohérente.

Perspectives d'avenir

• À mesure qu'Angular continue d'évoluer, la fonctionnalité @defer est susceptible de connaître de nouvelles améliorations et optimisations. Les développeurs peuvent s'attendre à un contrôle plus précis sur la manière et le moment où certaines parties de leur application sont chargées et rendues.

@defer et IntersectionObserver

Sous le capot, @defer utilise l'API IntersectionObserver. Cette API vous permet d'observer les changements dans l'intersection d'un élément cible avec un élément ancêtre ou dans la fenêtre d'affichage du document de niveau supérieur. En différant le chargement des composants jusqu'à ce qu'ils soient sur le point d'entrer dans la fenêtre d'affichage, vous pouvez éviter de charger des ressources que l'utilisateur ne verra peut-être jamais, économisant ainsi la bande passante et la puissance de traitement.

Autres avantages d'IntersectionObserver

Temps de chargement initial amélioré : le report des composants jusqu'à ce qu'ils soient nécessaires garantit que seules les parties les plus critiques de l'application sont chargées initialement. Cela réduit le temps de chargement initial et améliore les performances perçues de l'application, la rendant plus rapide et plus réactive. Angular créera des bundles séparés pour les composants différés, réduisant ainsi également la taille de votre bundle principal.

Expérience utilisateur améliorée : en chargeant le contenu juste avant qu'il ne devienne visible, vous pouvez garantir une expérience plus fluide et plus transparente aux utilisateurs. Cette technique peut être particulièrement bénéfique pour les pages à défilement long, où le chargement du contenu au fur et à mesure que l'utilisateur fait défiler peut empêcher l'application de devenir lente.

Meilleures performances sur les appareils à faible consommation : les appareils avec une puissance de traitement limitée ou des connexions réseau lentes peuvent bénéficier considérablement d'un chargement différé. En chargeant uniquement les composants nécessaires, ces appareils peuvent gérer les applications plus efficacement, offrant ainsi une meilleure expérience aux utilisateurs sur une large gamme d'appareils.

Exemples

Utiliser @defer sans aucune option

Voici un exemple montrant comment utiliser @defer dans une application Angular. Tout d’abord, créez un composant qui charge les images. L'utilisation de composants autonomes est une exigence pour @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");
}

Et ici, nous utilisons @defer sans aucune option.

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

Maintenant, en regardant le bundle généré, nous pouvons voir que le composant image a son propre morceau.

Dans l'onglet réseau, lorsque la page est chargée, on peut voir que ce bundle est désormais chargé au moment de l'exécution.

Utiliser @defer avec les options

Plusieurs options sont disponibles pour améliorer l’expérience utilisateur. Dans cette section, nous passerons en revue certains d'entre eux.

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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!