Precaricamento nell'app create-react con Quicklink

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Per seguire questo codelab, apri questo Glitch in una seconda scheda.

Nota: questo codelab utilizza Chrome DevTools. Scarica Chrome, se non l'hai ancora fatto.

Questo codelab mostra come implementare la libreria Quicklink in una demo di React SPA, per dimostrare in che modo il precaricamento velocizza le navigazioni successive.

Misura

Prima di aggiungere le ottimizzazioni, è sempre opportuno analizzare lo stato attuale dell'applicazione.

• Fai clic su Remix per modificare per rendere il progetto modificabile.
• Per visualizzare l'anteprima del sito, premi Visualizza app, quindi Schermo intero .

Il sito web è una semplice demo creata con create-react-app.

Segui le istruzioni riportate di seguito nella nuova scheda appena aperta:

1. Premi "Control+Maiusc+J" (o "Comando+Opzione+J" su Mac) per aprire DevTools.
2. Fai clic sulla scheda Rete.
3. Seleziona la casella di controllo Disabilita cache.
4. Nell'elenco a discesa Limitazione, seleziona 3G veloce per simulare un tipo di connessione lenta.
5. Ricarica l'app.
6. Digita chunk nella casella di testo del filtro per nascondere le risorse che non includono chunk nel nome.

Il sito utilizza la suddivisione del codice basata su route, grazie alla quale viene richiesto solo il codice necessario all'inizio.

1. Cancella le richieste di rete in DevTools.
2. All'interno dell'app, fai clic sul link Blog per passare alla pagina corrispondente.

I blocchi JS e CSS per la nuova route vengono caricati per visualizzare la pagina.

Successivamente, implementerai Quicklink in questo sito, in modo che questi blocchi possano essere precaricati nella home page, velocizzando così la navigazione.

Questo ti consente di combinare il meglio di entrambe le tecniche:

• La suddivisione del codice basata su route indica al browser di caricare solo i blocchi necessari con una priorità superiore al momento del caricamento della pagina.
• Il precaricamento indica al browser di caricare i blocchi per i link nell'area visibile con la priorità più bassa, durante il tempo di inattività del browser.

Configura webpack-route-manifest

Il primo passaggio consiste nell'installare e configurare webpack-route-manifest, un plug-in webpack che consente di generare un file manifest che associa le route ai blocchi corrispondenti.

Di solito devi installare la libreria, ma l'abbiamo già fatto. Ecco il comando da eseguire:

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

config-overrides.js è un file che si trova nella directory root del progetto in cui puoi sostituire il comportamento esistente della configurazione del webpack, senza dover espellere il progetto.

• Per visualizzare la fonte, premi Visualizza sorgente.

Apri config-overrides.js per la modifica e aggiungi la dipendenza webpack-route-manifest all'inizio del file:

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

Dopodiché, configura il plug-in webpack-route-manifest aggiungendo il seguente codice in fondo a 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;
};

Il nuovo codice fa quanto segue:

• config.resolve dichiara le variabili con le route interne a pagine, asset e componenti.
• config.plugins.push() crea un oggetto RouteManifest e gli passa la configurazione in modo che il file rmanifest.json possa essere generato in base alle route e ai blocchi del sito.

Il file manifest.json verrà generato e reso disponibile all'indirizzo https://site_url/rmanifest.json.

Configura collegamento rapido

A questo punto, dovrai installare la libreria Quicklink nel tuo progetto. Per semplicità, l'abbiamo già aggiunto al progetto. Ecco il comando da eseguire:

npm install --save quicklink

Apri src/components/App/index.js per la modifica.

Per prima cosa, importa il componente di ordine superiore Quicklink (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'));

Crea quindi un oggetto options dopo la dichiarazione della variabile Blog, da utilizzare come argomento durante la chiamata a quicklink:

const options = {
    origins: []
};

Infine, aggrega ogni route con il componente di ordine superiore withQuicklink(), trasmettendo un parametro options e il componente target per quella 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>
);

Il codice precedente indica di precaricare i blocchi per le route sottoposte a wrapping con withQuicklink(), quando il link entra nella visualizzazione.

Nota: se a questo punto Glitch genera un errore sull'assenza di una dipendenza, prova ad aprire Il terminale (Strumenti > Terminale), a eseguire refresh nel terminale, quindi a eseguire npm run build.

Misura di nuovo

Ripeti i primi 6 passaggi di Misura. Non andare ancora alla pagina del blog.

Quando la home page carica, i blocchi per quella route vengono caricati. Successivamente, Quicklink precarica i blocchi del percorso per i link nell'area visibile:

Questi blocchi vengono richiesti con la priorità più bassa e senza bloccare la pagina.

In seguito:

1. Cancella di nuovo il log di rete.
2. Disattiva la casella di controllo Disabilita cache.
3. Fai clic sul link Blog per passare alla pagina corrispondente.

La colonna Dimensioni indica che questi blocchi sono stati recuperati dalla "cache di precaricamento" anziché dalla rete. Il caricamento di questi blocchi senza un link rapido ha richiesto circa 580 ms. Utilizzando la libreria ora sono necessari 2 ms, il che corrisponde a una riduzione del 99% .