Comme je l’ai indiqué dans l’article précédent, Angular 17 apporte des nouveautés pour le Lazy Loading, de base il n’y a que le lazy loading de routes où le navigateur ne charge le JS d’une route que lorsque l’utilisateur y accède, désormais avec Angular 17 nous allons pouvoir lazy loader des parties de nos templates. Tout ceci va être possible grâce au nouveau bloc @defer !
Présentation de @defer
@defer permet donc de charger du contenu en fonction d’un paramètre décidé et se présente ainsi :
@defer {
<comment-list />
}
Comme je l’ai dis @defer peut prendre plusieurs « déclencheurs » différents en compte pour son activation, voici un récapitulatif des différents déclencheurs :
- on idle : Idle déclenchera le chargement différé une fois que le navigateur aura atteint un état d’inactivité (détecté à l’aide de l’API requestIdleCallback). C’est le comportement par défaut avec un bloc @defer.
- on viewport : permet de charger le contenu du defer que lorsque celui-ci atteindra le viewport du navigateur, c’est à dire quand l’utilisateur aura scrollé à ce niveau.
- on interaction : permet de lancer le defer lorsque l’utilisateur interagit avec un élément comme un bouton.
- on hover : permet de lancer le defer au survol de celui ci par l’utilisateur. Nous pouvons être beaucoup plus précis dans ce déclencheur en y ajoutant en () le nom d’un template.
- on immediate : permet de lancer le defer immédiatement lorsque le site a fini de charger côté client.
- on timer : permet de lancer le defer avec un timer donc de pouvoir y mettre une valeur personnalisé.
@defer (on timer(500ms)) {
<comment-list />
}
@defer (on viewport) {
<comment-list />
}
Ou encore :
<div #test>Hello!</div>
@defer (on hover(test)) {
<comment-list />
}
Nous retrouvons aussi le déclencheur de type « when » qui permet de déclencher le @defer lors d’un événement précis :
@defer (when process.isEnd) {
<comment-list />
}
Mais ce n’est pas tout, le @defer est composé de plusieurs bloc afin d’être le plus précis et performant possible, voici un exemple type d’un @defer avec tous ses blocs :
@defer (on viewport) {
<my-org-chart />
} @placeholder {
<p>contenu du placeholder</p>
} @loading(after: 100ms; minimum: 500ms) {
<img alt=« loading… » src=« loading.gif » />
} @error {
<p>Erreur lors du chargement.</p>
}
Pour rentrer un peu plus dans les détails, @defer suivis d’un paramètre ou non est le bloc permettant de faire le LazyLoading, @placeholder va être le contenu généré avant le contenu qui doit être affiché de base, ou alors avant le contenu du @loading, qui lui permet d’afficher du contenu durant le chargement. Et pour finir @error va permettre d’afficher un contenu dans le cas où il y aurait une erreur.
Voici une image provenant de : https://angularexperts.io/blog/angular-defer-lazy-loading-total-guide permettant de mieux comprendre le bloc @defer :
Si vous souhaitez avoir plus de renseignements ou de tutos sur cette nouvelle technologie je vous invite à vous rendre sur :
Ou encore :
