Angular 17 : @defer, la Nouvelle Révolution du Lazy Loading

Angular 17 introduit une innovation majeure dans la gestion des chargements paresseux (lazy loading) : la directive @defer. Cette nouvelle fonctionnalité permet de charger le contenu de manière différée, en fonction de diverses conditions déclencheuses. Découvrons comment @defer transforme l'expérience utilisateur et optimise les performances des applications Angular.

Le Lazy Loading : Un Bref Aperçu

Le lazy loading est une technique essentielle dans le développement web moderne. Elle permet de ne charger que les ressources nécessaires lors de l'interaction de l'utilisateur avec la page, réduisant ainsi le temps de chargement initial et optimisant les performances.

@defer : Le Lazy Loading Évolué

Dans les versions précédentes d'Angular, le lazy loading était réalisable via le Router ou des importations dynamiques. Angular 17 franchit une étape supplémentaire avec @defer, qui permet un chargement différé plus granulaire et flexible.

En savoir plus sur le lazy loading

Fonctionnement de @defer

Le bloc @defer ne charge son contenu que lorsque certaines conditions sont remplies. Voici un aperçu de la syntaxe à mettre dans un template :

@defer (condition) {
  // Contenu à charger
}
@placeholder {
  // Contenu affiché en attendant
}
@error {
  // Contenu en cas d'erreur de chargement
}
@loading(minimum 1s) {
  // Contenu pendant le chargement
}

Exemple

Structure

• src
  • app
    • app.component.html
    • app.component.ts

Fichiers

app.component.html

@defer (when myCondition()) {
  <app-c1/>
}
@placeholder {
  <span>Placeholder</span>
}
@error {
  <span>Error</span>
}
@loading(minimum 1s) {
  <span>Loading...</span>
}

app.component.ts

import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  templateUrl: './app.component.html'
})
export class AppComponent {
  myCondition = signal(false);
}

Exemples d'Utilisation de @defer

1. Chargement sur Interaction :

   <h3>Interaction</h3>
   
   @defer (on interaction) {
     <div>Cliqué</div>
   }
   @placeholder {
     <div>Placeholder (cliquez dessus !)</div>
   }

   Ici, le contenu ne se charge que lorsque l'utilisateur interagit avec le bloc @placeholder.

2. Chargement sur Entrée dans le Viewport :

   <h3>Viewport</h3>
   
   @defer (on viewport) {
     <app-child text="Le bloc est entré dans le viewport"/>
   }
   @placeholder {
     <div>Placeholder</div>
   }

   Dans cet exemple, le contenu se charge lorsque le bloc @placeholder entre dans le viewport.

   On suppose ici que le composant app-child a été défini et importé.

3. Chargement sur Temporisation :

   <h3>Timer(5s)</h3>
   
   @defer (on timer(5s)) {
     <div>Visible après 5s</div>
   }
   @placeholder {
     <div>Placeholder</div>
   }

   Le contenu est différé et chargé après un délai de 5 secondes.

Autres Types de Déclencheurs pour @defer

• on hover : se déclenche au survol.
• on idle : se déclenche lorsque le navigateur est inactif.
• prefetch on hover : précharge le contenu au survol pour une interaction future.