Un guide du chargement paresseux dans Angular / Blogs / Perficient

Le chargement différé doit être envisagé pour les applications volumineuses comportant de nombreux itinéraires. Parfois, l’optimisation des performances peut risquer d’offrir une meilleure expérience utilisateur.

En utilisant la technique connue sous le nom de « chargement paresseux », le navigateur charge uniquement les modules ou les parties requis pour le scénario particulier. Tous les modules ne seront pas chargés sauf la route active. Cette technique permet d’obtenir des tailles de bundle initiales inférieures et contribue à des temps de chargement plus rapides.

Généralement, lorsque l’on démarre l’application par défaut, les NgModules sont chargés avec impatience. Cela signifie que dès que tous les NgModules seront chargés, que cela soit nécessaire ou non.

Utilisez loadChildren (au lieu du composant) dans la configuration des routes AppRoutingModule pour charger paresseusement les modules angulaires.

const routes: Routes = [
    {
      path: "items",
      loadChildren: () =>
        import("./items/items.module").then((m) => m.ItemsModule),
    },
  ];

Étapes pour implémenter le chargement différé dans Angular

1. Créer un module de fonctionnalités avec un fichier de routage
2. Créer des composants
3. Ajouter une route pour les composants
4. Ajouter des liens de navigation
5. Implémenter le chargement paresseux

1. Créez un module de fonctionnalités avec un fichier de routage

Créez une nouvelle application angulaire ou dans votre application existante, nous allons ici créer un nouveau module Admin. Pour créer le module, nous utiliserons la commande Angular cli. Nous pouvons créer un module avec des modules dans l’application Angular à l’aide de la commande fournie par Angular. Ainsi, nous utiliserons la commande suivante pour créer le module admin :

ng g module admin --routing

Lorsque nous exécutons avec succès la commande ci-dessus, nous créerons des fichiers comme celui-ci :

src/app/admin/admin.module.ts
src/app/admin/admin-routing.module.ts

2. Créer des composants

Créons les composants pour les modules. La commande suivante créera un composant pour le module d’administration. Ainsi, nous allons créer trois composants (accueil, utilisateur et publication) dans notre module d’administration.

ng g component admin/admin
ng g component admin/user
ng g component admin/post

3. Ajouter une route pour les composants

Ici, l’itinéraire sera ajouté à l’aide du composant créé. Après cela, nous utiliserons notre fichier nommé admin-routing module et le mettrons à jour.

src/app/admin/admin-routing.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { AdminComponent } from "./home/home.component";
import { UserComponent } from "./user/user.component";
import { PostComponent } from "./post/post.component";

const routes: Routes = [
 { path: "", component: AdminComponent },
 { path: "user", component: UserComponent },
 { path: "post", component: PostComponent },
];

@NgModule({
 imports: [RouterModule.forChild(routes)],
 exports: [RouterModule],
})

export class AdminRoutingModule {}

4. Ajouter des liens de navigation

Nous allons maintenant ajouter des liens vers le fichier HTML du composant de l’application. Nous utiliserons route-outlet pour ajouter tous les liens de la route.

src/app/app.component.html

<div class="container">
 <nav>
  <ul>
   <li>
    <a href="#home" routerLink="/admin">
      Admin
    </a>
   </li>
   <li>
    <a href="#user" routerLink="/admin/user">
      User
    </a>
   </li>
   <li>
     <a href="#post" routerLink="/admin/post">
      Post
     </a>
   </li>
  </ul>
 </nav>
</div>

5. Implémenter le chargement paresseux

Maintenant, importez App RoutingModule dans le fichier module.ts. En utilisant la manière suivante :

src/app/app.module.ts

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";

@NgModule({
 declarations: [AppComponent],
 imports: [BrowserModule, AppRoutingModule],
 providers: [],
 bootstrap: [AppComponent],
})

export class AppModule {}

Apportez les modifications nécessaires dans app-routing.module.ts.

Ici, nous allons charger le module paresseusement en utilisant loadChildren.

app-routage.module.ts

import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { HomeComponent } from "./home/home.component";

const routes: Routes = [
 {
  path: "admin",
  loadChildren: () =>
  import("./module/admin.module").then((m) => m.AdminModule),
 },
 {
  path: "other",
  loadChildren: () =>
  import("./module/other.module").then((m) => m.OtherModule),
 },
 {
  path: "",
  component: HomeComponent,
 },
];

@NgModule({
 imports: [RouterModule.forRoot(routes)],
 exports: [RouterModule],
 providers: [],
})

export class AppRoutingModule {}

Maintenant, notre code ci-dessus est prêt à être exécuté. Pour exécuter le code, utilisez la commande suivante :

ng serve