Préchargement dans create-react-app avec Quicklink

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Cet atelier de programmation vous explique comment implémenter la bibliothèque Quicklink dans une démo de l'application monopage React pour démontrer comment le préchargement accélère les navigations ultérieures.

Mesurer

Avant d'ajouter des optimisations, il est toujours judicieux d'analyser d'abord l'état actuel de l'application.

• Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
• Pour prévisualiser le site, appuyez sur Afficher l'application, puis sur Plein écran .

Le site Web est une démonstration simple conçue à l'aide de create-react-app.

Procédez comme suit dans le nouvel onglet qui vient de s'ouvrir:

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.
3. Cochez la case Désactiver le cache.
4. Dans la liste déroulante "Limitation", sélectionnez 3G rapide pour simuler un type de connexion lente.
5. Actualisez l'application.
6. Saisissez chunk dans la zone de texte Filtrer pour masquer les ressources dont le nom n'inclut pas chunk.

Le site utilise la simulation de code basée sur le routage, grâce à laquelle seul le code nécessaire est demandé au début.

1. Effacez les requêtes réseau dans les outils de développement.
2. Dans l'application, cliquez sur le lien Blog pour accéder à la page correspondante.

Les fragments JS et CSS du nouvel itinéraire sont chargés afin d'afficher la page.

Ensuite, vous implémenterez Quicklink sur ce site, afin que ces morceaux puissent être préchargés sur la page d'accueil, ce qui rend la navigation plus rapide.

Vous pouvez ainsi combiner le meilleur des deux techniques:

• La division du code basée sur le routage indique au navigateur de ne charger que les fragments nécessaires à une priorité plus élevée au moment du chargement de la page.
• Le préchargement indique au navigateur de charger les fragments des liens dans la fenêtre d'affichage avec la priorité la plus basse, pendant le temps d'inactivité du navigateur.

Configurer webpack-route-manifest

La première étape consiste à installer et configurer webpack-route-manifest, un plug-in webpack qui vous permet de générer un fichier manifeste associant les routes aux fragments correspondants.

En règle générale, vous devez installer la bibliothèque, mais nous l'avons déjà fait pour vous. Voici la commande à exécuter:

npm install webpack-route-manifest --save-dev

config-overrides.js est un fichier placé dans le répertoire racine de votre projet, dans lequel vous pouvez remplacer le comportement existant de la configuration webpack, sans avoir à éjecter le projet.

• Pour afficher la source, appuyez sur Afficher la source.

Ouvrez config-overrides.js pour le modifier et ajoutez la dépendance webpack-route-manifest au début du fichier:

const path = require('path');
const RouteManifest = require('webpack-route-manifest');

Configurez ensuite le plug-in webpack-route-manifest en ajoutant le code suivant en bas de config-overrides.js:

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: {
      '@assets': `${path.resolve(__dirname, 'src/assets')}`,
      '@pages': `${path.resolve(__dirname, 'src/pages')}`,
      '@components': `${path.resolve(__dirname, 'src/components')}`,
    },
  };

  config.plugins.push(
    new RouteManifest({
      minify: true,
      filename: 'rmanifest.json',
      routes(str) {
        let out = str.replace('@pages', '').toLowerCase();
        if (out === '/article') return '/blog/:title';
        if (out === '/home') return '/';
        return out;
      },
    }),
  );

  return config;
};

Le nouveau code effectue les opérations suivantes:

• config.resolve déclare les variables avec les routes internes vers les pages, les éléments et les composants.
• config.plugins.push() crée un objet RouteManifest et lui transmet la configuration afin que le fichier rmanifest.json puisse être généré en fonction des routes et des fragments du site.

Le fichier manifest.json sera généré et mis à disposition à l'adresse https://site_url/rmanifest.json.

Configurer Quicklink

À ce stade, vous devez installer la bibliothèque Quicklink dans votre projet. Pour plus de simplicité, nous l'avons déjà ajoutée au projet. Voici la commande à exécuter:

npm install --save quicklink

Ouvrez src/components/App/index.js pour le modifier.

Commencez par importer le composant Quicklink de commande supérieure (HOC):

import React, { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom';

import Footer from '@components/Footer';
import Hero from '@components/Hero';
import style from './index.module.css';
import { withQuicklink } from 'quicklink/dist/react/hoc.js';

const Home = lazy(() => import(/* webpackChunkName: "home" */ '@pages/Home'));
const About = lazy(() => import(/* webpackChunkName: "about" */ '@pages/About'));
const Article = lazy(() => import(/* webpackChunkName: "article" */ '@pages/Article'));
const Blog = lazy(() => import(/* webpackChunkName: "blog" */ '@pages/Blog'));

Créez ensuite un objet options après la déclaration de variable Blog, à utiliser comme argument lorsque vous appelez quicklink:

const options = {
    origins: []
};

Enfin, encapsulez chaque route avec le composant d'ordre supérieur withQuicklink(), en lui transmettant un paramètre options et le composant cible de cette route:

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 code précédent indique de précharger des fragments pour les routes encapsulées avec withQuicklink() lorsque le lien apparaît dans la vue.

Mesurer à nouveau

Répétez les six premières étapes de Mesurer. N'accédez pas encore à la page du blog.

Lorsque la page d'accueil charge, les fragments de cet itinéraire sont chargés. Après cela, Quicklink précharge les fragments de la route pour les liens dans la fenêtre d'affichage:

Ces fragments sont demandés avec la priorité la plus basse et sans bloquer la page.

Ensuite :

1. Effacez à nouveau le journal réseau.
2. Décochez la case Désactiver le cache.
3. Cliquez sur le lien Blog pour accéder à cette page.

La colonne Size (Taille) indique que ces fragments ont été récupérés à partir du "cache de préchargement", et non du réseau. Le chargement de ces fragments sans Quicklink a pris environ 580 ms. L'utilisation de la bibliothèque prend désormais 2 ms, ce qui représente une réduction de 99% .