Vorabladen von Links im Viewport mit Quicklink für Single-Page-Anwendungen in React
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 im Allgemeinen als „Chunks“ bezeichnet.
Bei diesen Websites werden jedoch statt der Dokumente die größten Leistungssteigerungen erzielt, wenn diese Chunks vorab abgerufen werden, bevor sie auf der Seite benötigt werden.
Das ist mit einigen Herausforderungen verbunden:
- Es ist nicht einfach, vor der Landung herauszufinden, welche Teile (z.B.
article.chunk.js) einer bestimmten Route (z.B./article) zugeordnet sind. - 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 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.
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 als Nächstes Quicklink, indem Sie npm install quicklink ausführen.
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-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 legst du fest, dass diese Routen vorab abgerufen werden sollen, sobald sie in den Blick kommen:
- Importieren Sie das
quicklink-HOC am Anfang der Komponente. - 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.
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 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 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.
Wenn Sie diese Technik auf Ihrer gesamten Website implementieren, kann die Navigation so verbessert werden, dass sie fast augenblicklich erscheint.