Que sont les vues différables ?

Une page Angular entièrement rendue peut contenir de nombreux composants, directives et pipes différents. Si certaines parties de la page doivent être affichées immédiatement à l'utilisateur, d'autres peuvent attendre pour s'afficher plus tard. Les vues différables d'Angular, avec la syntaxe @defer, peuvent vous aider à accélérer votre application en indiquant à Angular d'attendre avant de télécharger le JavaScript des parties de la page qui n'ont pas besoin d'être affichées tout de suite.

Dans cette activité, vous allez apprendre à utiliser les vues différables pour charger en différé une section du template de votre composant.

1. Ajouter un bloc @defer à une section d'un template

   Dans votre app.ts, enveloppez le composant article-comments dans un bloc @defer pour le charger en différé.

   @defer {
     <article-comments />
   }

   Par défaut, @defer charge le composant article-comments lorsque le navigateur est inactif.

   Dans la console de développement de votre navigateur, vous pouvez voir que le fichier de chunk lazy article-comments-component est chargé séparément (les noms de fichiers exacts peuvent changer d'une exécution à l'autre) :

   Initial chunk files | Names | Raw size
   chunk-NNSQHFIE.js | - | 769.00 kB |
   main.js | main | 229.25 kB |
   
   Lazy chunk files | Names | Raw size
   chunk-T5UYXUSI.js | article-comments-component | 1.84 kB |

Beau travail ! Vous avez appris les bases des vues différables.