Cours Angular · Module 3: Modules
Lazy Loading - Les escouades à la demande
Dans cette leçon3
Le lazy loading est une technique consistant à charger les modules uniquement quand on en a besoin - comme déployer des escouades seulement quand le besoin se fait sentir.
Configuration du lazy loading
1// app-routing.module.ts
2const routes: Routes = [
3 { path: '', redirectTo: '/home', pathMatch: 'full' },
4 { path: 'home', component: HomeComponent },
5
6 // Modules en lazy loading
7 {
8 path: 'samurai',
9 loadChildren: () => import('./features/samurai/samurai.module')
10 .then(m => m.SamuraiModule)
11 },
12 {
13 path: 'dojo',
14 loadChildren: () => import('./features/dojo/dojo.module')
15 .then(m => m.DojoModule)
16 }
17];
18
19@NgModule({
20 imports: [RouterModule.forRoot(routes)],
21 exports: [RouterModule]
22})
23export class AppRoutingModule { }Le routage dans un Feature Module
1// features/samurai/samurai-routing.module.ts
2const routes: Routes = [
3 { path: '', component: SamuraiListComponent },
4 { path: ':id', component: SamuraiDetailComponent },
5 { path: ':id/edit', component: SamuraiFormComponent }
6];
7
8@NgModule({
9 imports: [RouterModule.forChild(routes)], // forChild, pas forRoot!
10 exports: [RouterModule]
11})
12export class SamuraiRoutingModule { }Les avantages du lazy loading
| Aspect | Without Lazy Loading | With Lazy Loading |
|---|---|---|
| Initial Bundle | Application entière | Uniquement core + home |
| Load time | Long | Court |
| Memory | Tout d'un coup | À la demande |
| UX | Attente longue | Démarrage rapide |
Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. Quelle syntaxe est correcte pour le lazy loading d'un module ?
2. Quel est le principal avantage qu'apporte le lazy loading des modules ?
Voici 2 des 4 questions de cette leçon. Réponds aux autres dans le jeu.
Tâches pratiques dans le jeu
- Éditeur de code
Complète la configuration de routage pour charger le module SamuraiModule en lazy loading.
- Tri horizontal
Ordonne le début du lazy loading sur une seule ligne (jusqu'à l'import dynamique) :
- Tri vertical
Ordonne les étapes du lazy loading d'un module après que l'utilisateur a navigué vers le chemin :
- Clique dans l'ordre
Clique sur les éléments dans l'ordre pour construire l'appel : RouterModule.forChild(