Chargement différé des modules

Le chargement différé améliore les performances en chargeant les modules uniquement lorsqu’ils sont nécessaires. Découvrons cette fonctionnalité importante d’Angular.

Qu’est-ce que le chargement différé ?

Le chargement différé consiste à charger les modules de manière asynchrone lorsqu’un utilisateur accède à une route particulière, au lieu de charger tous les modules au démarrage de l’application.

Pourquoi utiliser le chargement différé ?

• Réduit le temps de chargement initial
• Améliore les performances
• Optimise l’utilisation des ressources

Créer un module chargé à la demande

Créez un module de fonctionnalité à charger à la demande avec Angular CLI :

ng generate module admin --route admin --module app.module

Configurer les routes chargées à la demande

Configurez le chargement à la demande dans votre module de routage :

{ path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }

Tester le chargement à la demande

Utilisez les outils de développement pour vérifier que les modules sont chargés uniquement lorsque les routes sont activées. Vous verrez de nouveaux fichiers JS se charger dynamiquement.

Stratégies de préchargement

Angular permet de précharger les modules chargés à la demande afin d’accélérer encore la navigation. Les stratégies courantes sont :

• Aucun préchargement (par défaut)
• Précharger tous les modules

Bonnes pratiques du chargement à la demande

Utilisez le chargement à la demande pour les modules qui ne sont pas nécessaires immédiatement au démarrage de l’application, comme les tableaux de bord d’administration ou les pages de paramètres.

Résumé

Vous avez appris à mettre en œuvre le chargement à la demande pour améliorer les performances de votre application Angular. Excellent travail !