Accélérer la navigation dans React avec Quicklink

Préchargez automatiquement les liens dans le champ de vision avec un lien rapide pour les applications monopages React.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Le préchargement est une technique qui permet d'accélérer la navigation en téléchargeant à l'avance les ressources pour la page suivante. Quicklink est une bibliothèque qui vous permet d'implémenter cette technique à grande échelle, en préchargeant automatiquement les liens lorsqu'ils s'affichent.

Dans les applications multipages, la bibliothèque précharge des documents (par exemple, /article.html) pour les liens dans le champ de vision afin que, lorsque l'utilisateur clique sur ces liens, ils puissent être récupérés à partir du cache HTTP.

Les applications à page unique utilisent généralement une technique appelée fractionnement du code basé sur les routes. Ainsi, le site ne peut charger le code d'un itinéraire donné que lorsque l'utilisateur y accède. Ces fichiers (JS, CSS) sont communément appelés "chunks".

Toutefois, sur ces sites, au lieu de précharger des documents, les gains de performances les plus importants proviennent du préchargement de ces blocs avant que la page n'en ait besoin.

Atteindre cet objectif présente quelques défis:

• Il n'est pas simple de déterminer quels blocs (par exemple, article.chunk.js) sont associés à un parcours donné (par exemple, /article) avant de s'y rendre.
• Les noms d'URL finales de ces fragments ne peuvent pas être prédits, car les bundles de modules modernes utilisent généralement le hachage à long terme pour la gestion des versions (par exemple, article.chunk.46e51.js).

Ce guide explique comment Quicklink résout ces défis et vous permet d'effectuer un préchargement à grande échelle dans les applications monopages React.

Déterminer les fragments associés à chaque itinéraire

L'un des principaux composants de quicklink est webpack-route-manifest, un plug-in webpack qui vous permet de générer un dictionnaire JSON de routes et de blocs. Cela permet à la bibliothèque de savoir quels fichiers seront nécessaires pour chaque parcours de l'application et de les précharger à mesure qu'ils s'affichent.

Après avoir intégré le plug-in au projet, il génère un fichier manifeste JSON associant chaque route à ses fragments correspondants:

{
  '/about': [
    {
      type: 'style',
      href: '/static/css/about.f6fd7d80.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/about.1cdfef3b.chunk.js',
    },
  ],
  '/blog': [
    {
      type: 'style',
      href: '/static/css/blog.85e80e75.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/blog.35421503.chunk.js',
    },
  ],
}

Vous pouvez demander ce fichier manifeste de deux manières:

• À partir d'une URL (par exemple, https://site_url/rmanifest.json)
• Via l'objet window, à window.__rmanifest.

Précharger les fragments pour les routes dans la fenêtre d'affichage

Une fois le fichier manifeste disponible, l'étape suivante consiste à installer Quicklink en exécutant npm install quicklink.

Ensuite, le composant d'ordre supérieur (HOC) withQuicklink() peut être utilisé pour indiquer qu'un parcours donné doit être préchargé lorsque le lien apparaît à l'écran.

Le code suivant appartient à un composant App d'une application React qui affiche un menu supérieur avec quatre liens:

const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={Home} />
        <Route path="/blog" exact component={Blog} />
        <Route path="/blog/:title" component={Article} />
        <Route path="/about" exact component={About} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

Pour indiquer à Quicklink que ces itinéraires doivent être préchargés lorsqu'ils s'affichent dans la vue:

1. Importez le HOC quicklink au début du composant.
2. Encapsulez chaque route avec le HOC withQuicklink(), en lui transmettant le composant de page et le paramètre d'options.

const options = {
  origins: [],
};
const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={withQuicklink(Home, options)} />
        <Route path="/blog" exact component={withQuicklink(Blog, options)} />
        <Route
          path="/blog/:title"
          component={withQuicklink(Article, options)}
        />
        <Route path="/about" exact component={withQuicklink(About, options)} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

Le HOC withQuicklink() utilise le chemin de la route comme clé pour obtenir les fragments associés à partir de rmanifest.json. En interne, lorsque les liens s'affichent, la bibliothèque injecte une balise <link rel="prefetch"> dans la page pour chaque fragment afin qu'ils puissent être préchargés. Les ressources préchargées sont demandées par le navigateur avec la priorité la plus basse et sont conservées dans le cache HTTP pendant cinq minutes. Passé ce délai, les règles cache-control de la ressource s'appliquent. Ainsi, lorsqu'un utilisateur clique sur un lien et passe à un itinéraire donné, les fragments sont récupérés dans le cache, ce qui réduit considérablement le temps nécessaire pour afficher cet itinéraire.

Conclusion

Le préchargement peut considérablement améliorer les temps de chargement pour les futures navigations. Dans les applications monopages React, vous pouvez y parvenir en chargeant les segments associés à chaque route avant que l'utilisateur n'y accède. La solution Quicklink pour les SPA React utilise webpack-route-manifest pour créer une carte des routes et des segments, afin de déterminer les fichiers à précharger lorsqu'un lien apparaît à l'écran. Implémenter cette technique sur l'ensemble de votre site peut considérablement améliorer la navigation, au point de la rendre instantanée.