Navigationen in React mit Quicklink beschleunigen

Mit Quicklink für React-Single-Page-Anwendungen werden In-Viewport-Links automatisch vorab abgerufen.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Prefetching ist eine Technik, 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 im großen Maßstab implementieren können, indem Links automatisch vorab abgerufen werden, sobald sie im Blickfeld sind.

In mehrseitigen Apps ruft die Bibliothek Dokumente (z.B. /article.html) für Links im sichtbaren Bereich vorab ab, sodass sie beim Klicken durch den Nutzer aus dem HTTP-Cache abgerufen werden können.

Single-Page-Apps verwenden häufig eine Technik namens routenbasierte Codeaufteilung. So kann die Website den Code für eine bestimmte Route nur laden, wenn der Nutzer zu dieser Route navigiert. Diese Dateien (JS, CSS) werden häufig als „Chunks“ bezeichnet.

Auf diesen Websites werden jedoch keine Dokumente, sondern diese Chunks vorab abgerufen, bevor die Seite sie benötigt.

Das ist mit einigen Herausforderungen verbunden:

• Es ist nicht einfach, zu bestimmen, welche Chunks (z.B. article.chunk.js) einer bestimmten Route (z.B. /article) zugeordnet sind, bevor man auf ihr landet.
• Die Namen der finalen URLs dieser Chunks lassen sich nicht vorhersagen, da moderne Modul-Bundler in der Regel langfristiges Hashing für die Versionsverwaltung verwenden (z.B. article.chunk.46e51.js).

In dieser Anleitung wird erläutert, wie Quicklink diese Herausforderungen löst und das Prefetching in großem Umfang in React-Single-Page-Apps ermöglicht.

Abschnitte für jede Route bestimmen

Eine der Kernkomponenten von quicklink ist webpack-route-manifest, ein webpack-Plug-in, mit dem Sie ein JSON-Wörterbuch mit Routen und Chunks generieren können. So kann die Bibliothek ermitteln, welche Dateien für die einzelnen Routen der Anwendung benötigt werden, und sie vorab abrufen, wenn die Routen angezeigt werden.

Nachdem Sie das Plug-in in das Projekt eingebunden haben, wird eine JSON-Manifestdatei erstellt, in der jede Route den entsprechenden Chunks zugeordnet wird:

{
  '/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 eine URL, z.B. https://site_url/rmanifest.json.
• Über das Fensterobjekt unter window.__rmanifest.

Chunks für Routen im sichtbaren Bereich vorab abrufen

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

Anschließend kann die Higher-Order Component (HOC) withQuicklink() verwendet werden, um anzugeben, dass eine bestimmte Route vorab abgerufen werden soll, wenn der Link in den sichtbaren Bereich kommt.

Der folgende Code gehört zu einer App-Komponente einer React-App, die ein oberes Menü 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 teilen Sie Quicklink mit, 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 HOC withQuicklink() und übergeben Sie die Seitenkomponente und den Parameter „options“ 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 die Ansicht gelangen, fügt die Bibliothek im Hintergrund für jeden Chunk ein <link rel="prefetch">-Tag in die Seite ein, damit die entsprechenden Ressourcen vorab abgerufen werden können. Vorgeholte Ressourcen werden vom Browser mit der niedrigsten Priorität angefordert und 5 Minuten lang im HTTP-Cache gespeichert. 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, die zum Rendern dieser Route benötigt wird, erheblich verkürzt.

Fazit

Durch das Vorabrufen können die Ladezeiten für zukünftige Navigationsvorgänge erheblich verkürzt werden. In React-Single-Page-Apps kann dies erreicht werden, indem die mit jeder Route verknüpften Chunks geladen werden, bevor der Nutzer auf der entsprechenden Seite landet. Die Lösung von Quicklink für React-SPAs verwendet webpack-route-manifest, um eine Karte von Routen und Chunks zu erstellen. So wird ermittelt, welche Dateien vorab abgerufen werden sollen, wenn ein Link in den Blick kommt. Wenn Sie diese Technik auf Ihrer gesamten Website implementieren, kann sich die Navigation erheblich verbessern und sogar so schnell erscheinen, dass sie als sofortig wahrgenommen wird.