Velocizza le navigazioni in React con Quicklink

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

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Il precaricamento è una tecnica per velocizzare le navigazioni 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 vengono visualizzati.

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

Le app a pagina singola utilizzano in genere una tecnica chiamata suddivisione del codice basata su route. In questo modo, il sito può caricare il codice per un determinato percorso solo quando l'utente vi accede. 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.

Il raggiungimento di 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.
• 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 ti consente di eseguire il precaricamento su larga scala nelle app React a pagina singola.

Determinare i blocchi associati a ciascuna 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. In questo modo la libreria può sapere quali file saranno necessari per ogni percorso dell'applicazione e precaricarli man mano che vengono visualizzati i percorsi.

Dopo aver integrato il plug-in con il progetto, verrà prodotto un file manifest JSON che associa ogni route ai relativi 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, alle ore 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 viene visualizzato.

Il seguente codice appartiene a un componente App di un'app React che mostra un menu nella parte superiore della pagina 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 precaricati non appena vengono visualizzati:

1. Importa il HOC quicklink all'inizio del componente.
2. Aggrega ogni route con il valore HOC withQuicklink(), passandoci 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>
);

Il HOC withQuicklink() utilizza il percorso della route come chiave per ottenere i blocchi associati da rmanifest.json. Di più, man mano che appaiono i link, la libreria inserisce un tag <link rel="prefetch"> nella pagina per ogni blocco in modo che possano essere precaricati. Le risorse precaricate verranno richieste dal browser con la priorità più bassa 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 precaricamento può migliorare notevolmente i tempi di caricamento per le navigazioni future. Nelle app React a pagina singola, questo può essere ottenuto 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 route e blocchi, al fine di determinare quali file precaricare quando viene visualizzato un link. L'implementazione di questa tecnica sul tuo sito può migliorare notevolmente le navigazioni, fino a farle apparire immediatamente.