Angular est un framework JavaScript frontend développé par Google pour créer des applications web évolutives de niveau entreprise. Certaines de ces applications peuvent devenir assez volumineuses, ce qui affecte 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é ou « lazy loading ». Cette fonctionnalité native d’Angular vous permet de charger d’abord uniquement les éléments requis de l’application web, puis de charger d’autres modules au besoin.
Dans cet article, vous découvrirez le chargement différé et comment il peut contribuer à accélérer votre application web.
Qu’est-ce que le chargement différé ?
Le chargement différé fait référence à la technique consistant à charger les éléments d’une page web uniquement lorsqu’ils sont nécessaires. Son pendant est le chargement rapide ou eager loading, lorsque tout se charge – ou tente de se charger – immédiatement. Le fait de récupérer toutes les images, les vidéos, les feuilles de style en cascade (CSS) et le code JavaScript de façon précipitée peut entrainer des temps de chargement longs, ce qui est une mauvaise nouvelle pour les utilisateurs.
Le chargement différé est souvent utilisé pour les images et les vidéos sur les sites qui hébergent beaucoup de contenu. Au lieu de charger tous les médias en une seule fois, ce qui utiliserait beaucoup de bande passante et ralentirait l’affichage des pages, ces éléments sont chargés lorsque leur emplacement sur la page est sur le point de défiler à la vue.
Angular est un framework d’application à page unique qui s’appuie sur JavaScript pour la plupart 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 récupérer d’abord les modules nécessaires et différer le chargement des autres modules jusqu’à ce qu’ils soient nécessaires.
Avantages du chargement différé dans Angular
Le chargement différé offre des avantages qui rendront votre site plus convivial. Il s’agit notamment de :
- Temps de chargement plus rapide : JavaScript contient des instructions pour l’affichage de votre page et le chargement de ses données. Pour cette raison, c’est une ressource qui bloque le rendu. Cela signifie que le navigateur doit attendre de charger tout le JavaScript avant de rendre votre page. Lors du chargement différé dans Angular, le JavaScript est divisé en morceaux qui sont chargés séparément. Le morceau initial ne contient que la logique nécessaire au module principal de la page. Il est chargé avec empressement, puis les autres modules sont chargés de manière différée. En réduisant la taille du chunk initial, le site se charge et s’affiche plus rapidement.
- Moins d’utilisation des données : En divisant les données en morceaux et en les chargeant selon les besoins, vous pourriez utiliser moins de bande passante.
- Ressources du navigateur préservées : Puisque le navigateur ne charge que les morceaux nécessaires, il ne gaspille pas la mémoire et le processeur en essayant d’interpréter et de rendre le code qui n’est pas nécessaire.
Mise en œuvre du chargement différé dans Angular
Pour suivre ce tutoriel, vous aurez besoin des éléments suivants :
- NodeJS installé
- Connaissance de base d’Angular
Créez votre projet
Vous utiliserez le CLI Angular pour créer votre projet. Vous pouvez installer le 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 le 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 doit ressembler à ceci :
Créer un module de fonctionnalité avec des routes
Ensuite, vous allez créer un module de fonctionnalité qui se chargera de manière différée. 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 différé est la troisième ligne :
const routes: Routes = [ { path: 'blog', loadChildren: () => import('./blog/blog.module').then(m => m.BlogModule) }];
Cette ligne définit les routes. La route pour le blog utilise l’argument loadChildren au lieu de component. L’argument loadChildren indique à Angular de charger la route de manière différée – d’importer dynamiquement le module uniquement lorsque la route est visitée, puis de le renvoyer au routeur. Le module définit ses propres routes enfant, 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, ''. Celle-ci 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 récupère les détails d’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 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}];
Ceci ajoute une route qui se résout pour blog/:title (par exemple, blog/angular-tutorial). Ce tableau de routes est chargé de manière différée et n’est pas inclus dans le paquetage initial.
Vérifiez 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 :
ng serve d’Angular.La sortie ci-dessus est divisée en deux parties : Initial Chunk Files sont les fichiers chargés lors du premier chargement de la page. Lazy Chunk Files sont les fichiers chargés en différé. Le module de blog est répertorié dans cet exemple.
Vérification du chargement différé par le biais des journaux réseau du navigateur
Une autre façon de confirmer le chargement différé est d’utiliser l’onglet Réseau dans le panneau Outils de développement de votre navigateur. (Sous Windows, il s’agit de F12 dans Chrome et Microsoft Edge, et de Ctrl–Shift–I dans Firefox. Sur un Mac, c’est Command–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 naviguez vers /blog, vous remarquez qu’un nouveau chunk, src_app_blog_blog_module_ts.js, est chargé. Cela signifie que votre module a été demandé uniquement lorsque vous avez navigué vers cette route, et qu’il est chargé en différé. Le journal du réseau devrait ressembler à ceci :
Chargement différé vs chargement rapide
À titre de comparaison, créons également un module à chargement rapide et voyons comment cela affecte la taille du fichier et le temps de chargement. Pour le démontrer, vous allez créer un module d’authentification. Un tel module pourrait avoir besoin d’être chargé rapidement, 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 le CLI :
ng generate module auth --routing --module app.module
Cela génère le module et un fichier de routage. Elle 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 en différé. Elle utilise le paramètre --routing au lieu de --route <name>. Cela ajoute le module d’authentification au tableau imports dans app.module.ts:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
AuthModule //added auth module
],
providers: [],
bootstrap: [AppComponent]
})
L’ajout de AuthModule à votre tableau d’importations AppModule signifie que le module d’authentification est ajouté aux fichiers chunk initiaux et sera inclus avec le bundle JavaScript principal. Pour vérifier cela, vous pouvez exécuter à nouveau ng serve et observer la sortie :
ng serve d’Angular après l’ajout du module d’authentification.Comme vous pouvez le constater, le module d’authentification n’est pas inclus dans les fichiers chunk différés. De plus, la taille du paquet initial a augmenté. Le fichier main.js a presque doublé de taille, passant de 8 Ko à 15 Ko. Dans cet exemple, l’augmentation est faible, car les composants ne contiennent pas beaucoup de code. Mais, à mesure que vous remplissez les composants de logique, la taille de ce fichier augmentera, ce qui plaide en faveur du chargement différé.
Résumé
Vous avez appris à utiliser le chargement différé 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 les ressources de votre 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 la section sur la mise en cache Edge de Kinsta pour voir des chiffres impressionnants.
A digital product manager by day, Michael is a tech enthusiast who is always tinkering with different technologies. His interests include web and mobile frameworks, NoCode development, and blockchain development.
Laisser un commentaire