Navigationen in React mit Quicklink beschleunigen

Vorabladen von Links im Viewport mit Quicklink für React-Single-Page-Anwendungen

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Prefetching ist eine Methode, mit der die Navigation beschleunigt wird, indem die Ressourcen für die nächste Seite vorab heruntergeladen werden. Quicklink ist eine Bibliothek, mit der Sie diese Technik in großem Umfang implementieren können, indem Links automatisch vorab abgerufen werden, sobald sie in den Blick kommen.

In mehrseitigen Apps werden in der Bibliothek Dokumente (z.B. /article.html) für In-Viewport-Links vorab abgerufen, damit sie beim Klicken des Nutzers auf diese Links aus dem HTTP-Cache abgerufen werden können.

Bei Single-Page-Apps wird häufig die routenbasierte Codeaufteilung verwendet. So kann die Website den Code für eine bestimmte Route nur laden, wenn der Nutzer sie aufruft. Diese Dateien (JS, CSS) werden allgemein als „Chunks“ bezeichnet.

Bei diesen Websites ist es jedoch sinnvoller, die einzelnen Chunks vorab zu laden, bevor sie auf der Seite benötigt werden, anstatt die Dokumente vorab zu laden.

Das ist mit einigen Herausforderungen verbunden:

• Es ist nicht trivial zu bestimmen, welche Chunks (z.B. article.chunk.js) einer bestimmten Route (z.B. /article) zugeordnet sind, bevor sie aufgerufen wird.
• Die endgültigen URL-Namen dieser Chunks können nicht vorhergesagt werden, da moderne Modul-Bundler in der Regel Long-Term-Hashing für die Versionierung verwenden (z.B. article.chunk.46e51.js).

In diesem Leitfaden wird erläutert, wie Quicklink diese Herausforderungen löst und es Ihnen ermöglicht, in React-Single-Page-Apps vorab zu laden.

Chunks für jede Route ermitteln

Eine der Hauptkomponenten von quicklink ist webpack-route-manifest, ein webpack-Plug-in, mit dem du ein JSON-Wörterbuch mit Routen und Chunks generieren kannst. So kann die Bibliothek erkennen, welche Dateien für jede Route der Anwendung benötigt werden, und sie vorab abrufen, sobald die Routen in den Blick kommen.

Nachdem du das Plug-in in das Projekt eingebunden hast, wird eine JSON-Manifestdatei erstellt, in der jeder Route die entsprechenden Chunks zugeordnet werden:

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

Diese Manifestdatei kann auf zwei Arten angefordert werden:

• Über URL, z.B. https://site_url/rmanifest.json.
• Durch das Fensterobjekt bei window.__rmanifest.

Chunks für Routen im Viewport vorab abrufen

Sobald die Manifestdatei verfügbar ist, installieren Sie Quicklink mit npm install quicklink.

Anschließend kann mit der Komponente höherer Ordnung (HOC) withQuicklink() angegeben werden, dass eine bestimmte Route vorab abgerufen werden soll, wenn der Link in den Bereich sichtbar wird.

Der folgende Code gehört zu einer App-Komponente einer React-App, die ein Menü oben mit vier Links rendert:

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

So legst du fest, dass diese Routen vorab abgerufen werden sollen, sobald sie in den Blick kommen:

1. Importieren Sie das quicklink-HOC am Anfang der Komponente.
2. Umschließen Sie jede Route mit dem withQuicklink()-HOC und übergeben Sie die Seitenkomponente und den Optionsparameter an das HOC.

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

Das withQuicklink()-HOC verwendet den Pfad der Route als Schlüssel, um die zugehörigen Chunks von rmanifest.json abzurufen. Wenn Links in den Blick kommen, fügt die Bibliothek für jeden Block ein <link rel="prefetch">-Tag in die Seite ein, damit sie vorab abgerufen werden können. Vorab abgerufene Ressourcen werden vom Browser mit der niedrigsten Priorität angefordert und 5 Minuten lang im HTTP-Cache aufbewahrt. Danach gelten die cache-control-Regeln der Ressource. Wenn ein Nutzer also auf einen Link klickt und zu einer bestimmten Route wechselt, werden die Chunks aus dem Cache abgerufen. Dadurch wird die Zeit für das Rendern dieser Route erheblich verkürzt.

Fazit

Durch das Vorabladen können die Ladezeiten für zukünftige Navigationen erheblich verbessert werden. In React-Single-Page-Apps kann dies erreicht werden, indem die mit jeder Route verknüpften Chunks geladen werden, bevor der Nutzer sie aufruft. Die Lösung von Quicklink für React SPA verwendet webpack-route-manifest, um eine Karte mit Routen und Chunks zu erstellen, um zu bestimmen, welche Dateien vorab geladen werden sollen, wenn ein Link in den Blick kommt. Wenn Sie diese Technik auf Ihrer gesamten Website implementieren, kann die Navigation so verbessert werden, dass sie fast augenblicklich erscheint.