Mit Quicklink für React Single-Page-Anwendungen können Links im Darstellungsbereich automatisch vorab abgerufen werden.
Der Prefetch ist eine Technik, um die Navigation zu beschleunigen, indem die Ressourcen für die nächste Seite vorab heruntergeladen werden. Quicklink ist eine Bibliothek, mit der Sie dieses Verfahren in großem Umfang implementieren können, indem Links in der Ansicht automatisch vorab abgerufen werden.
In mehrseitigen Apps ruft die Bibliothek Dokumente (z.B. /article.html) für Links im Darstellungsbereich vorab ab, sodass sie aus dem HTTP-Cache abgerufen werden können, wenn der Nutzer auf diese Links klickt.
Bei Apps mit nur einer Seite wird in der Regel die sogenannte routenbasierte Codeaufteilung verwendet. Auf diese Weise kann die Website den Code für eine bestimmte Route nur dann laden, wenn der Nutzer sie aufruft. Diese Dateien (JS, CSS) werden allgemein als „Chunks“ bezeichnet.
Vor diesem Hintergrund werden auf diesen Websites die größten Leistungssteigerungen nicht durch Vorabruf von Dokumenten erzielt, wenn die entsprechenden Teile vorab abgerufen werden, bevor die Seite sie benötigt.
Dies birgt einige Herausforderungen:
- Es ist nicht leicht zu bestimmen, welche Chunks (z.B.
article.chunk.js) einer bestimmten Route (z.B./article) zugeordnet sind, bevor sie auf dieser landen. - Die Namen der finalen URL dieser Blöcke können nicht vorhergesagt werden, da moderne Modul-Bundler für die Versionsverwaltung in der Regel langfristiges Hashing (z.B.
article.chunk.46e51.js) verwenden.
In diesem Leitfaden wird erläutert, wie Quicklink diese Herausforderungen löst und es Ihnen ermöglicht, den Vorabruf in Single-Page-Apps von React in großem Umfang zu ermöglichen.
Mit jeder Route verbundene Blöcke bestimmen
Eine der Kernkomponenten von quicklink ist webpack-route-manifest, ein webpack-Plug-in, mit dem Sie ein JSON-Wörterbuch aus Routen und Blöcken generieren können.
Dadurch weiß die Bibliothek, welche Dateien für die einzelnen Routen der Anwendung benötigt werden, und ruft diese für die Routen, die in der Ansicht angezeigt werden, vorab ab.
Nach der Integration des Plug-ins in das Projekt wird eine JSON-Manifestdatei erstellt, in der jede Route den entsprechenden Blöcken zugeordnet ist:
{
'/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. - Über das Fensterobjekt bei
window.__rmanifest.
Blöcke für Routen im Darstellungsbereich vorabrufen
Sobald die Manifestdatei verfügbar ist, installieren Sie im nächsten Schritt Quicklink, indem Sie npm install quicklink ausführen.
Anschließend kann mit der hochrangigen Komponente (HOC) withQuicklink() angegeben werden, dass eine bestimmte Route vorab abgerufen werden soll, wenn der Link in der Ansicht angezeigt wird.
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 legen Sie für Quicklink fest, dass diese Routen vorab abgerufen werden sollen, wenn sie in der Ansicht angezeigt werden:
- Importieren Sie das
quicklink-HCC am Anfang der Komponente. - Umschließen Sie jede Route mit dem HOC
withQuicklink()und übergeben Sie 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>
);
Das HOC withQuicklink() verwendet den Pfad der Route als Schlüssel, um die zugehörigen Blöcke aus rmanifest.json abzurufen.
Wenn Links in der Ansicht angezeigt werden, schleust die Bibliothek für jeden Block ein <link rel="prefetch">-Tag in die 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 gespeichert. Danach gelten die cache-control-Regeln der Ressource.
Wenn also ein Nutzer auf einen Link klickt und zu einer bestimmten Route wechselt, werden die Blöcke aus dem Cache abgerufen, wodurch das Rendern dieser Route deutlich verkürzt wird.
Fazit
Durch den Vorabruf können die Ladezeiten für zukünftige Navigationen erheblich verbessert werden. In React-Apps mit nur einer Seite können die mit jeder Route verknüpften Blöcke geladen werden, 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 angezeigt wird.
Wenn Sie diese Technik auf Ihrer gesamten Website implementieren, kann die Navigation erheblich verbessert werden, sodass sie sofort angezeigt werden.