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) vengono comunemente chiamati "blocchi".

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

Raggiungere questo obiettivo presenta alcune sfide:

• Non è banale determinare quali tratti (ad es. article.chunk.js) sono associati a un determinato percorso (ad es. /article) prima di atterrare.
• 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.

Precarica blocchi per le route nell'area visibile

Una volta che 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 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 si sposta su una determinata route, i blocchi vengono recuperati dalla cache, migliorando notevolmente il tempo necessario per eseguire il rendering di quella route.

Conclusione

Il pre-caricamento può migliorare notevolmente i tempi di caricamento per le navigazioni future. Nelle app a pagina singola React, questo può essere ottenuto caricando i chunk associati a ogni route prima che l'utente li raggiunga. La soluzione 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.