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 de 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. Cela permet au site de ne charger le code d'un parcours 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.

Pour y parvenir, vous devez relever plusieurs 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 finaux de ces blocs ne peuvent pas être prédits, car les outils de regroupement de modules modernes utilisent généralement un hachage à long terme pour le contrôle 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 segments 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, un fichier manifeste JSON associe chaque route à ses segments 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:

• Par URL, par exemple https://site_url/rmanifest.json.
• Via l'objet fenêtre, à window.__rmanifest.

Précharger des segments pour les itinéraires dans le champ de vision

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 routes doivent être préchargées lorsqu'elles s'affichent:

1. Importez le HOC quicklink au début du composant.
2. Encapsulez chaque itinéraire 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>
);

La HOC withQuicklink() utilise le chemin d'accès du parcours comme clé pour obtenir les segments 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é-extraits. 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. Par conséquent, lorsqu'un utilisateur clique sur un lien et accède à un parcours donné, les segments sont récupérés à partir du cache, ce qui améliore considérablement le temps de rendu de ce parcours.

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.