Chargement paresseux dans Angular (mettez-le au travail sur votre site Web)

Angular est un framework JavaScript frontal développé par Google pour créer des applications Web évolutives de niveau entreprise. Certaines de ces applications peuvent devenir assez volumineuses, affectant le temps de chargement de votre application.

Pour réduire le temps de chargement et améliorer l'expérience globale de vos utilisateurs, vous pouvez utiliser une technique connue sous le nom de chargement différé. Cette fonctionnalité angulaire native vous permet de charger d'abord uniquement les éléments requis de l'application Web, puis de charger d'autres modules si nécessaire.

Dans cet article, vous découvrirez le chargement paresseux et comment il peut aider à accélérer votre application Web.

Qu'est-ce que le Lazy Load ?

Le chargement différé fait référence à la technique consistant à charger des éléments de page Web uniquement lorsqu'ils sont nécessaires. Son homologue est chargement impatient , lorsque tout se charge — ou essaie de se charger — immédiatement. Récupérer toutes les images, vidéos, CSS et code JavaScript avec impatience peut signifier de longs temps de chargement - une mauvaise nouvelle pour les utilisateurs.

Le chargement différé est souvent utilisé pour les images et les vidéos sur des sites qui hébergent beaucoup de contenu. Au lieu de charger tous les médias en même temps, ce qui utiliserait beaucoup de bande passante et engorgerait les pages vues, ces éléments sont chargés lorsque leur emplacement sur la page est sur le point de défiler.

Angular est un framework d'application d'une seule page qui s'appuie sur JavaScript pour une grande partie de ses fonctionnalités. La collection de JavaScript de votre application peut facilement devenir importante à mesure que l'application se développe, ce qui s'accompagne d'une augmentation correspondante de l'utilisation des données et du temps de chargement. Pour accélérer les choses, vous pouvez utiliser le chargement différé pour d'abord récupérer les modules requis et différer le chargement des autres modules jusqu'à ce qu'ils soient nécessaires.

Avantages du chargement paresseux dans Angular

Le chargement différé offre des avantages qui rendront votre site plus convivial. Ceux-ci inclus:

• Temps de chargement plus rapide : JavaScript contient des instructions pour afficher votre page et charger ses données. Pour cette raison, il s'agit d'une ressource bloquant le rendu . Cela signifie que le navigateur doit attendre de charger tout le JavaScript avant de rendre votre page. Lors du chargement paresseux dans Angular, le JavaScript est divisé en morceaux qui sont chargés séparément. Le bloc initial contient uniquement la logique nécessaire au module principal de la page. Il est chargé avec impatience, puis les modules restants sont chargés paresseusement. En réduisant la taille du bloc initial, vous accélérerez le chargement et le rendu du site.
• Moins d'utilisation des données : en divisant les données en blocs et en les chargeant au besoin, vous pouvez utiliser moins de bande passante.
• Ressources de navigateur conservées : étant donné que le navigateur ne charge que les morceaux nécessaires, il ne gaspille pas de mémoire ni de CPU en essayant d'interpréter et de restituer du code qui n'est pas nécessaire.

Implémentation du chargement paresseux dans Angular

Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :

• NodeJS installé
• Connaissance de base d'Angular

Accélérez votre projet

Vous utiliserez la CLI angulaire pour créer votre projet. Vous pouvez installer la CLI à l'aide de npm en exécutant la commande :

npm install -g @angular/cli

Après cela, créez un projet nommé Lazy Loading Demo comme ceci :

ng new lazy-loading-demo --routing

Cette commande crée un nouveau projet Angular, complet avec routage. Vous travaillerez exclusivement dans le dossier src/app , qui contient le code de votre application. Ce dossier contient votre fichier de routage principal, app-routing.module.ts . La structure du dossier devrait ressembler à ceci :

Créer un module de fonctionnalités avec des itinéraires

Ensuite, vous allez créer un module de fonctionnalités qui se chargera paresseusement. Pour créer ce module, exécutez cette commande :

ng generate module blog --route blog --module app.module

Cette commande crée un module nommé BlogModule , ainsi que le routage. Si vous ouvrez src /app/app-routing.module.ts , vous verrez qu'il ressemble maintenant à ceci :

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

La partie qui est importante pour le chargement paresseux est la troisième ligne :

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

Cette ligne définit les itinéraires. La route du blog utilise l'argument loadChildren au lieu de component . L'argument loadChildren indique à Angular de charger paresseusement la route - pour importer dynamiquement le module uniquement lorsque la route est visitée, puis le renvoyer au routeur. Le module définit ses propres routes enfants, telles que blog/** , dans son fichier routing.module.ts . Le module de blog que vous avez généré ressemble à ceci :

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { BlogComponent } from './blog.component'; const routes: Routes = [{ path: '', component: BlogComponent }]; @NgModule({ imports: [RouterModule.forChild(routes)], exports: [RouterModule] }) export class BlogRoutingModule { }

Vous remarquerez que ce fichier de routage contient une seule route, '' . Cela se résout pour /blog et pointe vers le BlogComponent. Vous pouvez ajouter d'autres composants et définir ces routes dans ce fichier.

Par exemple, si vous souhaitez ajouter un composant qui extrait des détails sur un article de blog particulier, vous pouvez créer le composant avec cette commande :

ng generate component blog/detail

Cela génère le composant pour le détail du blog et l'ajoute au module de blog. Pour lui ajouter une route, vous pouvez simplement l'ajouter à votre tableau de routes :

 const routes: Routes = [{ path: '', component: BlogComponent }, {path:"/:title",component: DetailComponent}];

Cela ajoute une route qui résout blog/:title (par exemple, blog/angular-tutorial ). Ce tableau de routes est chargé paresseux et n'est pas inclus dans le groupe initial.

Vérifier le chargement différé

Vous pouvez facilement vérifier que le chargement différé fonctionne en exécutant ng serve et en observant la sortie. Au bas de votre sortie, vous devriez obtenir quelque chose comme ceci :

La sortie ci-dessus est divisée en deux parties : Les fichiers de Initial Chunk Files sont les fichiers chargés lors du premier chargement de la page. Lazy Chunk Files sont chargés paresseusement. Le module de blog est répertorié dans cet exemple.

Vérification du chargement différé via les journaux réseau du navigateur

Une autre façon de confirmer le chargement différé consiste à utiliser l'onglet Réseau dans le panneau Outils de développement de votre navigateur. (Sous Windows, c'est F12 dans Chrome et Microsoft Edge, et Ctrl - Maj - I dans Firefox. Sur un Mac, c'est Commande - Option - I dans Chrome, Firefox et Safari.)

Sélectionnez le filtre JS pour afficher uniquement les fichiers JavaScript chargés sur le réseau. Après le chargement initial de l'application, vous devriez obtenir quelque chose comme ceci :

Lorsque vous accédez à /blog , vous remarquerez qu'un nouveau morceau, src_app_blog_blog_module_ts.js , est chargé. Cela signifie que votre module n'a été demandé que lorsque vous avez navigué vers cet itinéraire et qu'il est chargé paresseusement. Le journal réseau devrait ressembler à ceci :

Chargement paresseux vs chargement impatient

À titre de comparaison, créons également un module chargé avec impatience et voyons son impact sur la taille du fichier et le temps de chargement. Pour illustrer cela, vous allez créer un module d'authentification. Un tel module devra peut-être être chargé avec impatience, car l'authentification est quelque chose que vous pourriez exiger de tous les utilisateurs.

Générez un AuthModule en exécutant cette commande dans la CLI :

ng generate module auth --routing --module app.module

Cela génère le module et un fichier de routage. Il ajoute également le module au fichier app.module.ts . Cependant, contrairement à la commande que nous avons utilisée pour générer un module la dernière fois, celle-ci n'ajoute pas de route chargée paresseusement. Il utilise le paramètre --routing au lieu de --route <name> . Cela ajoute le module d'authentification au tableau des imports dans app.module.ts :

 @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule, AuthModule //added auth module ], providers: [], bootstrap: [AppComponent] })

L'ajout d'AuthModule à votre tableau d'importation AppModule signifie que le module d'authentification est ajouté aux fichiers de bloc initiaux et sera inclus avec le bundle JavaScript principal. Pour vérifier cela, vous pouvez exécuter à nouveau ng serve et observer le résultat :

Comme vous pouvez le voir, le module d'authentification n'est pas inclus dans les fichiers de blocs paresseux. De plus, la taille du bundle initial a augmenté. Le fichier main.js presque doublé de taille, passant de 8 Ko à 15 Ko. Dans cet exemple, l'augmentation est faible, car les composants contiennent peu de code. Mais, au fur et à mesure que vous remplissez les composants avec de la logique, cette taille de fichier augmentera, ce qui constituera un argument solide pour le chargement paresseux.

Résumé

Vous avez appris à utiliser le chargement paresseux dans Angular pour récupérer les modules uniquement lorsqu'ils sont nécessaires. Le chargement différé est une excellente technique pour améliorer les temps de chargement, réduire l'utilisation des données et mieux utiliser vos ressources frontend et backend.

Le chargement différé, associé à des technologies telles que les réseaux de distribution de contenu et la réduction de JavaScript, améliorera à la fois les performances de votre site Web et la satisfaction de vos utilisateurs.

Si vous développez un site WordPress et que vous voulez vraiment augmenter la vitesse, lisez à propos de Kinsta Edge Caching pour voir des chiffres impressionnants.