Skills à maîtriser

💜 Lazy Loading

<aside> 💟 Le lazy loading est une technique de chargement différé des ressources d'une page web. Il permet de charger uniquement les éléments visibles à l'écran au chargement initial, puis de charger les autres éléments au fur et à mesure de leur nécessité, réduisant ainsi le temps de chargement initial et améliorant la performance globale de la page.

</aside>

Lazy Loading dans les apps React et Next.js

Chapter 9: Lazy Loading in React and Next.js Apps

Lazy Loading dans Angular

Lazy Loading in Angular - Scaler Topics

Vous pouvez utiliser le lazy loading (ou chargement asynchrone) avec le routeur si vous construisez votre application et utilisez des modules de fonctionnalités pour organiser le code. Cela permet à un module entier de ne se charger qu'en cas de besoin, réduisant ainsi la taille des fichiers des bundles principaux et limitant éventuellement l'accès aux bundles aux seules personnes autorisées à les utiliser (comme les modules administratifs).

Parce qu'il n'y a pas d'isolation logique si votre application n'a pas été divisée en plusieurs modules, les charger paresseusement dans l'application n'est pas faisable. La notion de base est que le processus de construction Angular peut examiner les chemins de code et optimiser le code en fonction de la façon dont il est utilisé pour produire d'autres fichiers, mais il s'appuie fortement sur les modules Angular pour savoir comment le code est connecté.

Capture d’écran 2024-01-04 à 14.36.09.png

Étapes de la mise en œuvre du lazy loading