Accélérer la navigation dans React avec Quicklink

Préchargez automatiquement les liens dans la fenêtre d'affichage avec Quicklink 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 à mesure qu'ils apparaissent dans la vue.

Dans les applications multipages, la bibliothèque précharge les documents (par exemple, /article.html) pour les liens dans la fenêtre d'affichage. Ainsi, lorsque l'utilisateur clique sur ces liens, ils peuvent être récupérés dans le cache HTTP.

Les applications monopages utilisent généralement une technique appelée répartition du code basée sur le routage. Ainsi, le site ne charge le code d'un itinéraire donné que lorsque l'utilisateur y accède. Ces fichiers (JS, CSS) sont communément appelés "morceaux".

Cela dit, sur ces sites, au lieu de précharger les documents, les meilleurs gains de performances sont liés au préchargement de ces fragments avant que la page n'en ait besoin.

Pour y parvenir, vous devez relever certains défis:

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

Ce guide explique comment Quicklink résout ces problèmes et vous permet d'effectuer le préchargement à grande échelle dans les applications monopage React.

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

L'un des composants principaux de quicklink est webpack-route-manifest, un plug-in webpack qui vous permet de générer un dictionnaire JSON de routes et de fragments. Cela permet à la bibliothèque de savoir quels fichiers seront nécessaires par chaque route de l'application et de les précharger à mesure que les routes arrivent dans la vue.

Après avoir intégré le plug-in au projet, il génère un fichier manifeste JSON associant chaque route aux 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',
    },
  ],
}

Ce fichier manifeste peut être demandé de deux manières:

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

Précharger des 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 itinéraire donné doit être préchargé lorsque le lien apparaît dans la vue.

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 à mesure qu'ils apparaissent dans la vue:

1. Importez la table HOC quicklink au début du composant.
2. Encapsulez chaque itinéraire avec la commande 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 arrière-plan, à mesure que des liens s'affichent, la bibliothèque injecte une balise <link rel="prefetch"> sur 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 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 suit un itinéraire donné, les fragments sont récupérés du 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 des futures navigations. Dans les applications React monopage, cela peut être fait en chargeant les fragments associés à chaque itinéraire, avant que l'utilisateur n'y accède. La solution de Quicklink pour l'application monopage React utilise webpack-route-manifest pour créer une carte des routes et des fragments afin de déterminer les fichiers à précharger lorsqu'un lien arrive dans la vue. La mise en œuvre de cette technique sur l'ensemble de votre site peut considérablement améliorer les navigations au point de les rendre instantanées.