Navigationen in React mit Quicklink beschleunigen

Mit Quicklink für React-Anwendungen mit nur einer Seite können Links im Darstellungsbereich automatisch vorab abgerufen werden.

Addy Osmani

Anton Karlovskiy

Demián Renzulli

Der Prefetch ist ein Verfahren, mit dem die Navigation beschleunigt wird. Dazu werden die Ressourcen für die nächste Seite vorab heruntergeladen. 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 in der Ansicht eintreffen.

In mehrseitigen Apps ruft die Bibliothek Dokumente (z. B. /article.html) für Links im Darstellungsbereich vorab ab. So können Nutzer, die auf diese Links klicken, aus dem HTTP-Cache abgerufen werden.

Bei einseitigen Apps wird häufig die sogenannte routenbasierte Codeaufteilung verwendet. Dadurch kann die Website den Code für eine bestimmte Route nur dann laden, wenn der Nutzer zu dieser Route gelangt. Diese Dateien (JS, CSS) werden im Allgemeinen als „Chunks“ bezeichnet.

Vor diesem Hintergrund werden auf diesen Websites die größten Leistungssteigerungen nicht durch das Vorabrufen von Dokumenten erzielt, wenn diese Blöcke vorab abgerufen werden, bevor die Seite sie benötigt.

Dies zu erreichen, bringt einige Herausforderungen mit sich:

• Es ist nicht einfach, vor der Landung herauszufinden, welche Teile (z.B. article.chunk.js) einer bestimmten Route (z.B. /article) zugeordnet sind.
• Die Namen der finalen URLs dieser Blöcke können nicht vorhergesagt werden, da moderne Modul-Bundler in der Regel Langzeit-Hashing für die Versionsverwaltung verwenden (z.B. article.chunk.46e51.js).

In diesem Leitfaden wird erläutert, wie Quicklink diese Herausforderungen löst und den Vorabruf in großem Umfang in React-Single-Page-Apps ermöglicht.

Mit jeder Route verknüpfte Blöcke ermitteln

Eine der Kernkomponenten von quicklink ist webpack-route-manifest, ein Webpack-Plug-in, mit dem Sie ein JSON-Wörterbuch mit Routen und Blöcken erstellen können. Dadurch kann die Bibliothek erkennen, welche Dateien von den einzelnen Routen der Anwendung benötigt werden, und sie vorab abrufen, wenn die Routen in der Ansicht eintreffen.

Nach dem Integrieren des Plug-ins in das Projekt wird eine JSON-Manifestdatei erstellt, die jede Route mit den entsprechenden Blöcken verknüpft:

{
  '/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:

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

Blöcke für Routen innerhalb des Darstellungsbereichs vorabrufen

Sobald die Manifestdatei verfügbar ist, installieren Sie als Nächstes Quicklink, indem Sie npm install quicklink ausführen.

Dann kann die höher sortierte Komponente (HOC) withQuicklink() verwendet werden, um anzugeben, dass eine bestimmte Route vorab abgerufen werden soll, wenn der Link in der Ansicht erscheint.

Der folgende Code gehört zu einer App-Komponente einer React-Anwendung, 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 der Ansicht angezeigt werden:

1. Importiere das quicklink-HOC am Anfang der Komponente.
2. Verpacke jede Route mit dem HOC-Element withQuicklink() und übergib die Seitenkomponente und den Parameter „options“ an sie.

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

Der withQuicklink()-HOC verwendet den Pfad der Route als Schlüssel, um die zugehörigen Blöcke von rmanifest.json abzurufen. Intern fügt die Bibliothek beim Aufrufen von Links für jeden Block ein <link rel="prefetch">-Tag auf der Seite ein, damit sie vorab abgerufen werden können. Vorabgerufene 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 auf einen Link klickt und zu einer bestimmten Route wechselt, werden die Blöcke dann aus dem Cache abgerufen, wodurch die für das Rendern der Route benötigte Zeit erheblich verkürzt wird.

Fazit

Durch einen Vorabruf können die Ladezeiten für zukünftige Navigationen erheblich verkürzt werden. In React-Apps mit nur einer Seite werden dazu die mit jeder Route verknüpften Teile geladen, bevor der Nutzer darin landet. Die Quicklink-Lösung für React SPA verwendet webpack-route-manifest, um eine Karte mit Routen und Blöcken zu erstellen, um zu bestimmen, welche Dateien vorab abgerufen werden sollen, wenn ein Link in der Ansicht erscheint. Die Implementierung dieser Technik auf Ihrer gesamten Website kann die Navigation so weit verbessern, dass sie sofort erscheinen.