Comment effectuer le chargement différé des routes/fonctionnalités en Angular ?

Question

Accepted Answer

**Lazy loading** diffère le téléchargement du code d'une fonctionnalité jusqu'à ce que l'utilisateur y accède, au lieu de tout regrouper dans le téléchargement initial. Cela réduit le bundle initial et accélère le premier chargement de l'application.

## Lazy-loading d'un composant standalone (moderne)

```ts
export const routes: Routes = [
  { path: "home", component: HomeComponent },         // eager (in main bundle)
  {
    path: "admin",
    loadComponent: () =>                               // lazy — separate chunk
      import("./admin/admin.component").then(m => m.AdminComponent),
  },
];
```

L'`import()` dynamique indique à l'outil de build de scinder `AdminComponent` dans son propre chunk, téléchargé uniquement lorsque l'utilisateur visite `/admin`.

## Lazy-loading d'un groupe de routes

```ts
export const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>                                // load a whole feature's routes
      import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
  },
];
```

`loadChildren` charge différemment une zone de fonctionnalité entière (toutes ses routes/composants) comme un seul chunk — c'est la méthode standard pour scinder une grande application par fonctionnalité.

## La forme basée sur NgModule (codebases plus anciennes)

```ts
{
  path: "shop",
  loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
```

## Pourquoi c'est important

```text
Without lazy loading: main.js = Home + Admin + Dashboard + Reports + ... (large, slow)
With lazy loading:    main.js = Home only; other features load on navigation
```

Les utilisateurs ne téléchargent que ce qu'ils visitent réellement — critique pour les grandes applications d'entreprise avec de nombreuses zones de fonctionnalité, dont la plupart ne sont jamais ouvertes par un utilisateur donné.

## Stratégies de préchargement (le meilleur des deux mondes)

```ts
provideRouter(routes, withPreloading(PreloadAllModules));
// load lazy chunks in the background AFTER initial load, so navigation is instant
```

Le préchargement récupère les chunks lazy en arrière-plan après le chargement de l'application, donc le bundle initial reste petit *et* la navigation ultérieure se fait instantanément. Vous pouvez également écrire des stratégies personnalisées (par ex. précharger uniquement les routes probables suivantes).

## Pourquoi c'est important

Le lazy loading est la technique principale pour garder le bundle initial d'Angular petit au fur et à mesure que l'application grandit — essentiel pour les grandes applications d'entreprise multi-fonctionnalités qu'Angular cible.

Scinder par route/fonctionnalité (`loadComponent`/`loadChildren`) signifie des premiers chargements plus rapides, et l'appairage avec une stratégie de préchargement donne à la fois un démarrage rapide et une navigation fluide.

C'est une pratique de performance standard et hautement impactante dans toute application Angular de taille significative.