Stratégies de préchargement de routes dans Angular

Préchargez les itinéraires à l'avance pour accélérer le chargement des utilisateurs la navigation.

Minko Gechev

La répartition du code au niveau de la route peut vous aider à réduire le temps de chargement initial d'une application en retardant le code JavaScript associé aux routes qui ne sont pas initialement nécessaires. De cette façon, le routeur Angular attend qu'un utilisateur accède à une route donnée avant de déclencher une requête réseau pour télécharger le JavaScript associé.

Bien que cette technique soit idéale pour le chargement initial de la page, elle peut ralentir la navigation, en fonction de l'expérience utilisateur la latence et la bande passante du réseau. Pour résoudre ce problème, vous pouvez utiliser le préchargement des routes. Grâce au préchargement, lorsque l'utilisateur suit un itinéraire donné, vous pouvez télécharger et mettre en cache le code JavaScript associé aux routes susceptibles d'être nécessaires par la suite. Le routeur Angular fournit cette fonctionnalité prête à l'emploi.

Dans cet article, vous allez apprendre à accélérer la navigation lorsque vous divisez le code au niveau de la route grâce au préchargement JavaScript dans Angular.

Stratégies de préchargement des routes dans Angular

Le routeur Angular fournit une propriété de configuration appelée preloadingStrategy, qui définit la logique de préchargement et de traitement des modules Angular à chargement différé. Nous allons examiner deux stratégies possibles:

  • PreloadAllModules, qui précharge toutes les routes à chargement différé, comme son nom l'indique.
  • QuicklinkStrategy, qui précharge uniquement les itinéraires associés aux liens de la page actuelle.

Le reste de cet article se rapporte à un exemple d'application Angular. Le code source est disponible sur GitHub.

Utiliser la stratégie PreloadAllModules

L'application exemple comporte plusieurs routes à chargement différé. Pour précharger tous ces éléments à l'aide de la stratégie PreloadAllModules, qui est intégrée à Angular, spécifiez-le comme valeur de la propriété preloadingStrategy dans la configuration du routeur:

import { RouterModule, PreloadAllModules } from '@angular/router';
// …

RouterModule.forRoot([
  …
], {
  preloadingStrategy: PreloadAllModules
})
// …

Diffusez l'application et consultez le panneau Network (Réseau) dans les outils pour les développeurs Chrome:

  1. Appuyez sur Ctrl+Maj+J (ou Cmd+Option+J sur Mac) pour ouvrir les outils de développement.
  2. Cliquez sur l'onglet Réseau.

Vous devriez constater que le routeur a téléchargé nyan-nyan-module.js et about-about-module.js en arrière-plan lorsque vous avez ouvert l'application:

La stratégie PreloadAllModules en action.

Le routeur a également enregistré les paramètres de manière à ce que la transition soit instantanée lorsque vous accédez à une URL associée à l'un des modules préchargés.

PreloadAllModules est utile dans de nombreux cas. Cependant, pour les dizaines de modules, le préchargement agressif peut vraiment augmenter l'utilisation du réseau. De plus, comme le routeur doit enregistrer les routes dans tous les modules préchargés, il peut entraîner des calculs intensifs dans le thread UI et ralentir l'expérience utilisateur.

La bibliothèque quicklink offre une meilleure stratégie pour les applications volumineuses. Grâce à l'API IntersectionObserver, seuls les modules associés aux liens actuellement visibles sur la page sont préchargés.

Vous pouvez ajouter un lien rapide à une application Angular à l'aide du package ngx-quicklink. Commencez par installer le package à partir de npm:

npm install --save ngx-quicklink

Une fois qu'il est disponible dans votre projet, vous pouvez utiliser QuicklinkStrategy en spécifiant le preloadingStrategy du routeur et en important le QuicklinkModule:

import {QuicklinkStrategy, QuicklinkModule} from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    …
    QuicklinkModule,
    RouterModule.forRoot([…], {
      preloadingStrategy: QuicklinkStrategy
    })
  ],
  …
})
export class AppModule {}

Lorsque vous rouvrirez l'application, vous remarquerez que le routeur ne précharge que nyan-nyan-module.js, car le bouton situé au centre de la page contient un lien de routeur. Lorsque vous ouvrez le menu de navigation latéral, vous remarquerez que le routeur précharge route:

Démonstration de la stratégie de préchargement des liens rapides

L'exemple ci-dessus fonctionne pour une application de base, mais si votre application contient plusieurs modules à chargement différé, vous devrez importer QuicklinkModule dans un module partagé, l'exporter, puis importer le module partagé dans vos modules à chargement différé.

Commencez par importer le fichier QuicklinkModule à partir de ngx-quicklink dans votre module partagé, puis exportez-le:

import { QuicklinkModule } from 'ngx-quicklink';
…

@NgModule({
  …
  imports: [
    QuicklinkModule
  ],
  exports: [
    QuicklinkModule
  ],
  …
})
export class SharedModule {}

Importez ensuite SharedModule dans tous vos modules à chargement différé:

import { SharedModule } from '@app/shared/shared.module';
…

@NgModule({
  …
  imports: [
      SharedModule
  ],
  …
});

Quicklinks sera désormais disponible dans vos modules à chargement différé.

Aller au-delà du préchargement de base

Bien que le préchargement sélectif via Quicklink puisse accélérer considérablement la navigation, vous pouvez rendre votre stratégie de préchargement encore plus efficace sur le réseau à l'aide du préchargement prédictif, implémenté par Guess.js. En analysant un rapport de Google Analytics ou d'un autre fournisseur de solutions d'analyse, Guess.js peut prédire le parcours de navigation d'un utilisateur et ne précharger que les fragments JavaScript qui seront probablement nécessaires par la suite.

Pour découvrir comment utiliser Guess.js avec Angular, consultez cette page du site Guess.js.

Conclusion

Pour accélérer la navigation lorsque vous utilisez la division du code au niveau de l'itinéraire:

  1. Choisissez la stratégie de préchargement adaptée à la taille de votre application:
    • Les applications comportant peu de modules peuvent utiliser la stratégie PreloadAllModules intégrée d'Angular.
    • Les applications comportant de nombreux modules doivent utiliser une stratégie de préchargement personnalisée, telle que le lien rapide d'Angular, ou le préchargement prédictif, telle qu'elle est implémentée dans Guess.js.
  2. Configurez la stratégie de préchargement en définissant la propriété preloadStrategy du routeur Angular.