1. Qu’est-ce que le lazy loading ?
Le lazy loading, également connu sous le nom de « chargement à la demande » ou « chargement paresseux », est une technique d’optimisation des performances qui consiste à ne charger les ressources (modules, composants, images, etc.) que lorsqu’elles sont réellement nécessaires. Cette approche diffère du chargement traditionnel, où toutes les ressources sont chargées au démarrage de l’application, indépendamment de leur utilité immédiate.
Le principe du lazy loading repose sur le fait que, dans de nombreuses applications, certaines parties ou fonctionnalités ne sont pas utilisées immédiatement ou fréquemment par les utilisateurs. En ne chargeant que les ressources nécessaires pour les fonctionnalités actuellement utilisées, le lazy loading permet d’alléger la charge de travail du navigateur, d’accélérer le temps de chargement initial et d’améliorer les performances globales de l’application.
Dans le contexte d’Angular, le lazy loading est généralement appliqué aux modules. Grâce au système de routage d’Angular, il est possible de définir des règles pour charger des modules spécifiques uniquement lorsque l’utilisateur navigue vers une route associée à ces modules.
2. Comment mettre en place le lazy loading dans Angular ?
Imaginons que tu souhaites charger un module « OrdersModule » uniquement lorsqu’il est appelé, car ce module amène une fonctionnalité qui n’est pas utilisée sur l’entièreté de l’application.
Une fois l’application et le module créés, tu dois configurer le système de routage d’Angular pour charger le `OrdersModule` à la demande. Pour cela, tu vas utiliser la propriété `loadChildren` dans ta configuration de routage.
Typescript
const routes: Routes = [
//
{
path: ‘orders’,
loadChildren: () => import(‘./orders/orders.module’).then(m => m.OrdersModule)
}
//
];
Dans cet exemple, lorsque tu navigues vers ‘/orders’, le `OrdersModule` est chargé à la demande.
3. Quels sont les avantages et inconvénients du lazy loading ?
Avantages
Le principal avantage au Lazy loading est une amélioration des performances. Comme tu ne charges que les modules nécessaires au moment où ils sont utilisés, le temps de chargement initial de l’application est réduit et les performances globales améliorées.
De plus une application qui se charge plus rapidement offre une meilleure expérience utilisateur. Les utilisateurs n’ont pas besoin d’attendre que toute l’application soit chargée avant de pouvoir commencer à l’utiliser.
Inconvénients
Le lazy loading peut rendre l’architecture de ton application plus complexe, surtout si tu as de nombreux modules et que tu dois gérer les dépendances entre eux.
Lorsqu’un module est chargé à la demande, cela peut entraîner un léger délai, car les fichiers du module doivent être récupérés. Cependant, cela ne se produit que la première fois que le module est chargé.