Lorsque nous développons des applications web, nous sommes conviés à créer beaucoup de composants pour gérer les interfaces utilisateur. Suivant les actions des utilisateurs, nous les autorisons à naviguer de page en page sur nos applications au moyen d'un système de routes.

Supposons que tous nos composants sont déclarés dans un seul module à savoir AppModule par exemple, ce qui implique que nous avons un seul fichier de routes qui n'est rien d'autre que AppRoutingModule. Lorsque nous créons le build final du projet, nous remarquons la création d'un seul fichier Javascript qui contient toute la logique métier de notre application. En effet, au lancement de notre application web, tous les composants visibles comme invisibles à l'utilisateur sont chargés dans le navigateur ce qui crée des latences lorsque nous avons une grosse application. Cette latence est due au fait que le navigateur doit télécharger tout le bundle (fichier de build Javascript) avant d'afficher la première interface. Résultat, nous faisons face à des soucis d'expérience utilisateur.

Maintenant que le décor est bien planté, nous verrons comment gérer ça 😁

Comme vous l'aurez déjà deviné, la core team de Angular s'est penché sur le problème et ils ont trouvé une solution. Ils se sont dits ceci :

Pourquoi ne pas permettre le chargement des composants uniquement lorsque l'utilisateur demande à y avoir accès ? 🤔

C'est ainsi qu'est né le lazy-loading (chargement paresseux en français) au niveau des modules.

Pour implémenter cette technique, il faut que chacun des composants que nous voulons rendre paresseux au chargement soit associé à un module et bien évidemment autre que le module de base. En bref, chaque composant avec son module comme l'indique cette image :

Par la suite, dans notre fichier de route (AppRoutingModule par exemple), nous chargerons notre composant de façon dynamique comme ceci :

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(m => m.CustomersModule)
  }
];

• loadChildren permet le chargement dynamique ou asynchrone ou encore paresseux de notre composant à travers son module.

• Nous allons ensuite mettre en place un système de route dans notre composant customers et plus précisement dans un module de route propre à lui qui est CustomersRoutingModule :

    const routes: Routes = [
      {
        path: '',
        component: CustomersComponent
      }
    ];
  

En réalité, nous n'avons pas besoin de le faire manuellement. Il existe une ligne de commande qui fait le job à notre place :

ng generate module customers --route customers --module app.module

Cette commande nous créera un dossier avec six (06) fichiers à savoir :

• customers-routing.module.ts

• customers.component.html

• customers.component.scss

• customers.component.spec.ts

• customers.component.ts

• customers.module.ts

et rajoutera une route dans notre AppRoutingModule qui sera lazy-loading .

Pour finir, si nous créons un nouveau build, nous remarquerons l'existence d'un nombre de fichiers Javascript équivalent au nombre de chargement paresseux que nous avons implémenté dans notre fichier de routes AppRoutingModule. Ces fichiers sont des chunks c'est-à-dire qu'ils contiennent du code associé au module. Au lancement de l'application, seuls les composants qui sont destinés à apparaître sous les yeux de l'utilisateur se chargeront. Le constat est flagrant en inspectant le navigateur et en allant sur l'option Réseau. Au fur et à mesure que l'utilisateur décide de visiter une page, le chunk associé à cette page est téléchargé dans le navigateur. Résultat, l'application est davantage plus rapide.

En somme, il est judicieux de penser à mettre le lazy-loading dans nos applications si nous devons gérer un système de routes. Cela nous conforterait dans la rapidité d'affichage de nos applications au lancement surtout si l'utilisateur n'a pas une bonne connexion Internet. Nous avons toutefois la possibilité de définir la façon dont nous voulons effectuer notre chargement paresseux à travers des stratégies.

Pour plus d'informations 👉 Lazy-loading feature modules