Velocizza le navigazioni in React con Quicklink

Precarica automaticamente i link nel viewport con il link rapido per le applicazioni single page React.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Il prefetching è una tecnica per velocizzare le navigazioni scaricando in anticipo le risorse per la pagina successiva. Quicklink è una libreria che ti consente di implementare questa tecnica su larga scala, prelevando automaticamente i link man mano che vengono visualizzati.

Nelle app con più pagine, la libreria esegue il pre-caricamento dei documenti (ad es. /article.html) per i link in viewport, in modo che quando l'utente fa clic su questi link, possano essere recuperati dalla cache HTTP.

Le app a pagina singola utilizzano comunemente una tecnica chiamata suddivisione del codice in base al percorso. In questo modo, il sito carica il codice per una determinata route solo quando l'utente la visita. Questi file (JS, CSS) sono comunemente indicati come "chunk".

Detto questo, in questi siti, anziché prelevare i documenti, i maggiori miglioramenti del rendimento si ottengono prelevando questi blocchi prima che la pagina ne abbia bisogno.

Raggiungere questo obiettivo presenta alcune sfide:

• Non è banale determinare quali chunk (ad es. article.chunk.js) sono associati a un determinato percorso (ad es. /article) prima di raggiungerlo.
• I nomi degli URL finali di questi chunk non possono essere previsti, poiché i moderni bundler dei moduli in genere utilizzano l'hashing a lungo termine per il controllo della versione (ad es. article.chunk.46e51.js).

Questa guida spiega in che modo Quicklink risolve questi problemi e ti consente di eseguire il pre-caricamento su larga scala nelle app single page React.

Determina i chunk associati a ogni percorso

Uno dei componenti principali di quicklink è webpack-route-manifest, un plug-in webpack che consente di generare un dizionario JSON di route e chunk. In questo modo, la raccolta sa quali file saranno necessari per ogni percorso dell'applicazione e li precompila quando i percorsi vengono visualizzati.

Dopo aver integrato il plug-in con il progetto, verrà prodotto un file manifest JSON che associa ogni route ai relativi chunk:

{
  '/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.
• Tramite l'oggetto finestra, in window.__rmanifest.

Precaricamento di chunk per i percorsi all'interno dell'area visibile

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

Poi, il componente di ordine superiore (HOC) withQuicklink() può essere utilizzato per indicare che un determinato percorso deve essere precompilato quando il link viene visualizzato.

Il seguente codice appartiene a un componente App di un'app React che mostra un menu in alto 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 questi percorsi devono essere prerecuperati quando vengono visualizzati:

1. Importa l'HOC quicklink all'inizio del componente.
2. Avvolgi ogni route con l'HOC withQuicklink(), passandogli 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 withQuicklink() utilizza il percorso del percorso come chiave per ottenere i relativi chunk da rmanifest.json. Dietro le quinte, quando i link vengono visualizzati, la libreria inserisce un tag <link rel="prefetch"> nella pagina per ogni chunk in modo che possano essere prerecuperati. Le risorse prelevate verranno richieste con la priorità più bassa dal browser e 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 chunk vengono recuperati dalla cache, migliorando notevolmente il tempo necessario per eseguire il rendering del percorso.

Conclusione

Il pre-caricamento può migliorare notevolmente i tempi di caricamento per le navigazioni future. Nelle app a pagina singola React, questo risultato può essere ottenuto caricando i chunk associati a ogni route prima che l'utente li raggiunga. La soluzione di Quicklink per le SPA React utilizza webpack-route-manifest per creare una mappa di route e chunk, al fine di determinare quali file prelevare quando un link viene visualizzato. L'implementazione di questa tecnica in tutto il sito può migliorare notevolmente le navigazioni fino a renderle istantanee.