Velocizza le navigazioni in React con Quicklink

Precarica automaticamente i link nell'area visibile con il link rapido per le applicazioni a pagina singola React.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Il precaricamento è una tecnica che consente di velocizzare la navigazione scaricando in anticipo le risorse per la pagina successiva. Quicklink è una libreria che consente di implementare questa tecnica su larga scala, precaricando automaticamente i link non appena compaiono nella visualizzazione.

Nelle app con più pagine, la libreria precarica i documenti (ad es. /article.html) per i link nell'area visibile, in modo che, quando l'utente fa clic su questi link, possa essere recuperato dalla cache HTTP.

Le app a pagina singola utilizzano in genere una tecnica chiamata suddivisione del codice basata su percorso. Ciò consente al sito di caricare il codice per un determinato percorso solo quando l'utente vi accede. Questi file (JS, CSS) sono comunemente chiamati "blocchi".

Detto questo, in questi siti, invece di precaricare i documenti, i maggiori miglioramenti del rendimento derivano dal precaricamento di questi blocchi prima che la pagina ne abbia bisogno.

Il raggiungimento di questo obiettivo presenta alcune sfide:

• Non è banale stabilire quali blocchi (ad es. article.chunk.js) sono associati a un determinato percorso (ad es. /article) prima di atterrarvi.
• Non è possibile prevedere i nomi degli URL finali di questi blocchi, poiché i moderni bundle di moduli in genere utilizzano l'hashing a lungo termine per il controllo delle versioni (ad es. article.chunk.46e51.js).

Questa guida spiega in che modo Quicklink risolve queste sfide e consente di ottenere il precaricamento su larga scala nelle app React a pagina singola.

Nota: al momento questa soluzione è compatibile solo con react-router.

Prova: dai un'occhiata al codelab Precaricamento nell'app create-react-con Quicklink per una dimostrazione pratica e guidata di Quicklink.

Determina i blocchi associati a ogni route

Uno dei componenti principali di quicklink è webpack-route-manifest, un plug-in webpack che consente di generare un dizionario JSON di route e blocchi. Ciò consente alla libreria di sapere quali file saranno necessari per ogni route dell'applicazione e di precaricarli man mano che le route entrano nella visualizzazione.

Dopo aver integrato il plug-in con il progetto, viene generato un file manifest JSON che associa ogni route ai blocchi corrispondenti:

{
  '/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',
    },
  ],
}

Questo file manifest può essere richiesto in due modi:

• Tramite URL, ad esempio https://site_url/rmanifest.json.
• Attraverso l'oggetto finestra, in window.__rmanifest.

Precarica blocchi per le route nell'area visibile

Quando il file manifest è disponibile, il passaggio successivo consiste nell'installare Quicklink eseguendo npm install quicklink.

Quindi, è possibile utilizzare il componente di ordine superiore (HOC) withQuicklink() per indicare che una determinata route deve essere precaricata quando il link diventa visibile.

Il seguente codice appartiene a un componente App di un'app React che esegue il rendering di un menu principale con quattro link:

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>
);

Per indicare a Quicklink che queste route devono essere precaricate non appena diventano visibili:

1. Importa l'HOC quicklink all'inizio del componente.
2. Racchiudi ogni percorso con l'HOC di withQuicklink(), trasmettendovi il componente della pagina e il parametro delle opzioni.

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>
);

L'HOC di withQuicklink() utilizza il percorso del percorso come chiave per ottenere i blocchi associati da rmanifest.json. In fondo, man mano che i link entrano nella visualizzazione, la libreria inserisce un tag <link rel="prefetch"> nella pagina per ogni blocco, in modo che possa essere precaricato. Le risorse precaricate verranno richieste dal browser alla priorità più bassa e verranno conservate nella cache HTTP per 5 minuti, dopodiché verranno applicate le regole cache-control della risorsa. Di conseguenza, quando un utente fa clic su un link e passa a un determinato percorso, i blocchi vengono recuperati dalla cache, migliorando notevolmente il tempo necessario per il rendering del percorso.

Conclusione

Il precaricamento può migliorare notevolmente i tempi di caricamento per le navigazioni future. Nelle app a pagina singola di React, è possibile farlo caricando i blocchi associati a ogni route, prima che l'utente vi arrivi. La soluzione di Quicklink per React SPA utilizza webpack-route-manifest per creare una mappa di percorsi e blocchi, al fine di determinare quali file precaricare quando un link entra nella visualizzazione. L'implementazione di questa tecnica nel tuo sito può migliorare notevolmente la navigazione al punto da farla apparire all'istante.