Comment faire du Lazy Loading sur Angular ?

A quoi ça sert ?

Le Lazy Loading (chargement différé) est une technique utilisée pour améliorer les performances de l'application en réduisant sa taille initiale et en ne chargeant que les modules qui sont nécessaires à un moment donné.

En utilisant le chargement différé, vous pouvez diviser votre application en plusieurs modules qui ne sont chargés que lorsqu'ils sont nécessaires. Ainsi, au lieu de charger tous les modules de votre application au démarrage, seuls les modules qui sont nécessaires pour afficher la vue actuelle sont chargés. Cela peut réduire significativement la taille de l'application initiale et améliorer les temps de chargement de l'application.

Le chargement différé est particulièrement utile dans les applications qui ont une grande quantité de contenu ou de fonctionnalités qui ne sont pas utilisées par tous les utilisateurs ou qui ne sont pas nécessaires sur toutes les pages de l'application. En utilisant le chargement différé, vous pouvez améliorer les performances de l'application en ne chargeant que les modules qui sont vraiment nécessaires, ce qui peut être particulièrement bénéfique pour les utilisateurs sur des appareils mobiles ou des connexions à faible débit.

Implémenter le Lazy Loading

Voici comment procéder pour implémenter le Lazy Loading sur Angular :

1. Créez un module de chargement différé en utilisant la syntaxe suivante :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'lazy',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

2. Dans ce module de chargement différé, définissez les routes pour les différents composants du module en utilisant la syntaxe suivante :

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LazyComponent } from './lazy.component';

const routes: Routes = [
  {
    path: '',
    component: LazyComponent
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class LazyRoutingModule { }

3. Utilisez la route de chargement différé dans votre template HTML en utilisant la syntaxe suivante :

<a [routerLink]="['/lazy']">Lazy Module</a>

Cela devrait vous permettre d'implémenter le chargement différé sur votre application Angular.