LAZY LOADING
Angular 17 apporte une innovation majeure dans la gestion du chargement différé avec l’introduction de la directive @defer. Cette nouvelle fonctionnalité permet un chargement différé plus sophistiqué, basé sur diverses conditions déclencheuses. Explorons comment @defer transforme l’expérience utilisateur et optimise les performances des applications Angular.
Lazy loading : Aperçu Rapide :
Le chargement différé est une technique cruciale dans le développement web moderne. Il vise à charger uniquement les ressources nécessaires lors de l’interaction de l’utilisateur avec la page, réduisant ainsi le temps de chargement initial et améliorant les performances.
@defer le lazy loading Évolué :
Dans les versions antérieures d’Angular, le chargement différé était réalisé à travers le Router ou des importations dynamiques. Angular 17 va plus loin avec @defer, offrant une approche de chargement différé plus granulaire et flexible.
Fonctionnement de @defer :
La directive @defer charge son contenu uniquement lorsque certaines conditions sont satisfaites. Voici un aperçu de la syntaxe à utiliser 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
main
app.component.html
app.component.ts
dans app.component.html
@defer (when myCondition()) {
<app-c1/>
}
@placeholder {
<span>Placeholder</span>
}
@error {
<span>Error</span>
}
@loading(minimum 1s) {
<span>Loading…</span>
}
dans le 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);
}
Exemple d’utilisation de @defer
Chargement du 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
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.
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.
