40. Lazy Loading des modules de fonctionnalités

Pour les grandes applications, charger tout le code au démarrage entraîne des temps de chargement lents. Le Lazy Loading est une technique d'optimisation qui charge les modules de fonctionnalités uniquement lorsque l'utilisateur navigue vers leurs routes respectives.

Prérequis : Modules de fonctionnalités

Pour faire du lazy loading, l'application doit être divisée en modules fonctionnels (ex : AdminModule, UsersModule) qui ne sont pas importés par l' AppModule.

Commande CLI pour créer un module avec routage :

bash ng g module admin --route admin --module app

Cela crée AdminModule et configure automatiquement la route de chargement différé dans AppRoutingModule.

Configurer la route en Lazy Loading

Au lieu de fournir un component, la route utilise loadChildren et la syntaxe d'importation dynamique import(), qui s'appuie sur les fonctionnalités modernes de JavaScript pour créer un bundle séparé.

app-routing.module.ts :

typescript const routes: Routes = [ { path: '', redirectTo: 'home', pathMatch: 'full' },

// Route standard chargée immédiatement (Eager Loading) { path: 'home', component: HomeComponent },

// Route en Lazy Loading // Quand l'utilisateur navigue vers /admin, Angular charge dynamiquement le fichier AdminModule. { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) } ];

Effet sur la performance

Lorsque vous lancez un build de production, le processus de build d'Angular sépare le code en plusieurs bundles (chunks). Le bundle racine reste petit, et les bundles des modules de fonctionnalités sont chargés de manière asynchrone à la demande. Cela améliore considérablement le temps de chargement initial de l'application.

Note : Des guards peuvent être appliqués aux routes en lazy loading exactement comme aux routes régulières. Le guard est exécuté avant que le bundle du module ne soit téléchargé.