Comment faire du lazy loading sur Angular ?

A quoi ça sert ?

Le lazy loading consiste à charger de manière différée les différentes parties de votre application au fur et à mesure de leur utilisation par l'utilisateur. Cela permet de réduire la taille initiale de votre application et de la rendre plus rapide à charger.

Lorsque votre application est constituée de plusieurs modules, le lazy loading vous permet de ne charger que les modules nécessaires à l'affichage de la page courante, ce qui peut réduire considérablement le temps de chargement de l'application.

Le lazy loading est particulièrement utile dans le cas d'applications de grande taille, ou qui comportent de nombreuses fonctionnalités qui ne sont pas utilisées par tous les utilisateurs. En ne chargeant que les modules nécessaires, vous pouvez améliorer significativement les performances de votre application et offrir une expérience utilisateur plus fluide.

Utiliser le Lazy Loading

Voici un structure de projet Angular :

app/
|- app.component.ts
|- app.routes.ts
|- app.config.ts
|- pages/
|  |- lazy.component.ts
|  |- lazy.routes.ts

1. Créez un nouveau fichier pour les routes:

app-lazy.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-lazy',
  standalone: true,
  template: `
    <h1>Lazy Component</h1>
  `
})
export class LazyComponent {}

lazy.routes.ts

import { Routes } from '@angular/router';
import { LazyComponent } from './lazy.component';

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

2. Ajoutez le module de routage dans le module principal (app.routes.ts):

import { Routes } from '@angular/router';
import { AppComponent } from './app.component';

export const routes: Routes = [
    {
        path: '',
        component: AppComponent
    },
    {
        path: 'backend',
        loadChildren: () => import('./pages/lazy/lazy.routes').then(m => m.routes)
    }
];

Donc au lieu de charger le module LazyComponent directement, Angular va charger le module LazyComponent uniquement lorsque l'utilisateur navigue vers le chemin /backend. Il pourra donc naviguer vers /backend/my-lazy-path pour charger le module LazyComponent.

import dynamique

L'import dynamique est une fonctionnalité d'ECMAScript qui permet de charger des modules de manière asynchrone. Cela permet de charger les modules uniquement lorsque c'est nécessaire, ce qui peut améliorer les performances de votre application.

import() renvoie une promesse qui se résout avec le module exporté du fichier spécifié. Vous pouvez ensuite utiliser then() pour accéder au module exporté. Effectivement, nous voulons charger le module de routage uniquement, donc nous utilisons then(m => m.routes).