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 d'application monopage React pour montrer comment le préchargement accélère les navigations suivantes.

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 pouvoir modifier le projet.
• Pour prévisualiser le site, appuyez sur Afficher l'application. Appuyez ensuite sur Plein écran

Le site Web est une démonstration simple conçue avec create-react-app.

Dans le nouvel onglet qui vient de s'ouvrir, procédez comme suit:

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 Disable cache (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 ne contient pas chunk.

Le site utilise la scission du 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 de la nouvelle route sont chargés pour afficher la page.

Ensuite, vous allez implémenter Quicklink sur ce site, afin que ces fragments puissent être préchargés dans la page d'accueil, ce qui accélère la navigation.

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 et 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 à la priorité la plus basse, pendant la période 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 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 ignorer 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 ce qui suit : jusqu'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 des 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 disponible à l'adresse https://site_url/rmanifest.json.

Configurer le lien rapide

À ce stade, vous devrez installer la bibliothèque Quicklink dans votre projet. Pour plus de simplicité, nous l'avons déjà ajouté 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 d'ordre supérieur (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'));

Ensuite, créez un objet options après la déclaration de la 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 demande de précharger les fragments pour les routes encapsulées avec withQuicklink() lorsque le lien arrive dans la vue.

Mesurer à nouveau

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

Lors du chargement de la page d'accueil, les fragments de cette route sont chargés. Quicklink précharge ensuite les fragments de l'itinéraire pour les liens dans la fenêtre d'affichage:

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

Ensuite :

1. Effacez à nouveau le journal réseau.
2. Décochez la case Disable cache (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é extraits 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% .