Cette page a été traduite par l'API Cloud Translation.

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 React monopages.

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 arrivent 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, de sorte que 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 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 "morceaux".

Cela étant dit, sur ces sites, le préchargement de ces fragments est effectué avant que la page n'en ait besoin, plutôt que de précharger les documents.

Atteindre cet objectif présente quelques défis:

Il n'est pas simple de déterminer quels fragments (par exemple, article.chunk.js) sont associés à une route donnée (par exemple, /article) avant d'y atterrir.
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 problèmes et vous permet d'effectuer un préchargement à grande échelle dans les applications React monopages.

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 vont être nécessaires pour 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 à 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:

Par 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, vous pouvez utiliser le composant d'ordre supérieur (HOC) withQuicklink() pour indiquer qu'un itinéraire donné doit être préchargé lorsque le lien arrive 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 lorsqu'ils s'affichent dans la vue:

Importez le code HOC quicklink au début du composant.
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 arrière-plan, lorsque les liens arrivent dans la vue, 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 avec la priorité la plus basse par le navigateur 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 prochaines navigations. Dans les applications React monopages, vous pouvez y parvenir en chargeant les fragments associés à chaque route avant que l'utilisateur n'y accède. La solution de Quicklink pour React SPA utilise webpack-route-manifest pour créer une carte d'itinéraires et de 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 la navigation au point de les rendre instantanées.