Implémenter le chargement paresseux dans Angular

1. Utilisation du chargement paresseux dans Angular
2. Implémenter le chargement paresseux dans Angular

Ce tutoriel discutera de l’utilisation du chargement paresseux dans Angular et comment l’implémenter.

Le chargement différé est le processus de chargement des ressources d’une page Web de manière différée. Cette technique est généralement utilisée sur les pages Web contenant de grandes quantités de données ou d’images, et non au niveau supérieur.

Le chargement paresseux Angular permet de charger uniquement les ressources requises pour une page donnée. Cela réduit la taille de téléchargement initiale et améliore les performances de votre application en réduisant les requêtes réseau.

Cela peut être réalisé à l’aide du module Lazy Load intégré d’Angular ou d’un module externe tel que le module Angular Universal Lazy Load, qui s’appuie sur Webpack pour la configuration et les builds.

Utilisation du chargement paresseux dans Angular

Le cas d’utilisation le plus courant du chargement différé est le chargement de données à partir d’une API, mais vous ne souhaitez pas récupérer toutes les données. Cela ne fonctionnera pas si votre application a une vue unique sans routage.

Le chargement différé garantit que seuls les modules essentiels sont chargés et utilisés lors du premier déploiement de l’application. Cela profite à l’application en termes de performances, car cela réduit les temps de chargement, ce qui se traduit par une application plus réactive pour l’utilisateur final.

Il faut un certain temps pour charger tous les modules, donc ce qu’il fait, c’est qu’il ne charge que quelques modules lorsque l’utilisateur visite une page pour la première fois, puis en charge plus si nécessaire.

Discutons de certains des cas d’utilisation du chargement paresseux Angular.

• Différer les scripts et les feuilles de style non critiques jusqu’à ce qu’ils soient nécessaires ;
• Les écrans orientés vendeur et orienté client sur un site Web de commerce électronique peuvent être séparés en différents modules. Vous pouvez également construire un module de paiement tout seul.
• Chargement des scripts et des feuilles de style uniquement à la demande.

Implémenter le chargement paresseux dans Angular

La mise en œuvre du chargement paresseux dans Angular est un processus très simple. Nous devons ajouter les bons modules et configurer nos itinéraires.

La première étape consiste à ajouter les modules nécessaires au chargement différé. Pour ce faire, nous importons LazyModule depuis @angular/router et l’ajoutons à notre tableau d’importations dans le décorateur NgModule de notre module d’application.

Ensuite, nous devons configurer nos routes pour spécifier quels modules doivent être chargés à la demande ou chargés paresseusement à la demande. Nous ajoutons une nouvelle route avec loadChildren: 'lazy-loaded-child-routes' comme attribut ou modifions une route existante.

Exemple:

Code TypeScript (app.component.ts) :

import { Component, NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent { }
@Component({
    selector: 'app-home',
    template: '<h3>Home Active!!!</h3>',
})
export class AppadComponent  {}
const routes: Routes = [
    { path: 'Home', component: AppadComponent },
    { path: 'About', loadChildren: './lazy-loading.module#SecondModule' }
];
@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }

Code TypeScript (lazy-loading.modules.ts) :

import { NgModule, Component } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
@Component({
    selector: 'app-about',
    template: '<h3>About Active!!!</h3>',
})
export class MyComponent  {}
const routes: Routes = [
    { path: '', component: MyComponent }
];
@NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
})
export class RootRoutingModule { }
@NgModule({
    imports:      [ RootRoutingModule ],
    declarations: [ MyComponent ]
})
export class SecondModule { }

Code HTML (app.component.html) :

<h2> Example of Angular Lazy Loading</h2>
    <a routerLink='Home'>Home</a>
    <br>
    <a routerLink='About'>About</a>
    <router-outlet></router-outlet>

Cliquez ici pour vérifier le fonctionnement du code ci-dessus.

Si possible, évitez les chemins de chargement paresseux que vos utilisateurs visitent fréquemment. Réduisez au maximum la taille de vos morceaux.

De plus, lorsqu’une route chargée paresseusement est récupérée, utilisez les états du routeur pour afficher un chargeur ou une animation afin que vos utilisateurs ne pensent pas que votre application est à la traîne.