In diesem Codelab erfahren Sie, wie Sie die Quicklink in einer React-SPA-Demo implementieren, um zu demonstrieren, wie der Vorabruf nachfolgende Navigationen beschleunigt.
Messen
Bevor Sie Optimierungen hinzufügen, sollten Sie immer zuerst den aktuellen Status der Anwendung analysieren.
- Klicke auf Zum Bearbeiten Remix, damit das Projekt bearbeitet werden kann.
- Wenn Sie sich eine Vorschau der Website ansehen möchten, klicken Sie auf App ansehen. Drücken Sie dann
Vollbild
Die Website ist eine einfache Demo, die mit create-react-app erstellt wurde.
Führen Sie im gerade geöffneten Tab die folgenden Schritte aus:
- Drücken Sie „Strg + Umschalttaste + J“ (oder „Befehlstaste + Option + J“ auf einem Mac), um die Entwicklertools zu öffnen.
- Klicken Sie auf den Tab Netzwerk.
- Klicken Sie das Kästchen Cache deaktivieren an.
- Wählen Sie in der Drop-down-Liste Drosselung die Option Schnelles 3G aus, um einen langsamen Verbindungstyp zu simulieren.
- Aktualisieren Sie die App.
- Geben Sie
chunkin das Filtertextfeld ein, um alle Ressourcen auszublenden, die nichtchunkim Namen haben.
Auf der Website wird eine routenbasierte Codeaufteilung verwendet, bei der am Anfang nur der erforderliche Code angefordert wird.
- Lösche die Netzwerkanfragen in den Entwicklertools.
- Klicken Sie in der App auf den Link Blog, um die entsprechende Seite aufzurufen.
Die JS- und CSS-Chunks für die neue Route werden geladen, um die Seite zu rendern.
Als Nächstes implementieren Sie Quicklink auf dieser Website, damit diese Blöcke auf der Startseite vorab abgerufen werden können. Dies beschleunigt die Navigation.
So können Sie das Beste beider Verfahren kombinieren:
- Durch die routenbasierte Codeaufteilung wird der Browser angewiesen, bei der Seitenladezeit nur die erforderlichen Blöcke mit höherer Priorität zu laden.
- Durch den Vorabruf wird der Browser angewiesen, die Blöcke für Links innerhalb des Darstellungsbereichs während der Inaktivität des Browsers mit der niedrigsten Priorität zu laden.
webpack-route-manifest konfigurieren
Der erste Schritt besteht darin, webpack-route-manifest zu installieren und zu konfigurieren, ein Webpack-Plug-in, mit dem Sie eine Manifestdatei generieren können, die Routen mit den entsprechenden Blöcken verknüpft.
Normalerweise müssten Sie die Bibliothek installieren, aber wir haben das bereits für Sie erledigt. Dazu müssten Sie folgenden Befehl ausführen:
npm install webpack-route-manifest --save-dev
config-overrides.js ist eine Datei, die im Stammverzeichnis deines Projekts abgelegt wird. Dort kannst du das bestehende Verhalten der Webpack-Konfiguration überschreiben, ohne das Projekt ausschließen zu müssen.
- Um die Quelle anzuzeigen, drücken Sie Quelltext anzeigen.
Öffnen Sie config-overrides.js zur Bearbeitung und fügen Sie die Abhängigkeit webpack-route-manifest am Anfang der Datei hinzu:
const path = require('path');
const RouteManifest = require('webpack-route-manifest');
Konfigurieren Sie als Nächstes das Plug-in webpack-route-manifest, indem Sie Folgendes hinzufügen:
Code am Ende von config-overrides.js:
module.exports = function override(config) {
config.resolve = {
...config.resolve,
alias: {
'@assets': `${path.resolve(__dirname, 'src/assets')}`,
'@pages': `${path.resolve(__dirname, 'src/pages')}`,
'@components': `${path.resolve(__dirname, 'src/components')}`,
},
};
config.plugins.push(
new RouteManifest({
minify: true,
filename: 'rmanifest.json',
routes(str) {
let out = str.replace('@pages', '').toLowerCase();
if (out === '/article') return '/blog/:title';
if (out === '/home') return '/';
return out;
},
}),
);
return config;
};
Der neue Code führt Folgendes aus:
config.resolvedeklariert Variablen mit den internen Routen zu Seiten, Assets und Komponenten.config.plugins.push()erstellt einRouteManifest-Objekt und übergibt ihm die Konfiguration, sodass die Dateirmanifest.jsonbasierend auf den Routen und Blöcken der Website generiert werden kann.
Die Datei manifest.json wird generiert und unter https://site_url/rmanifest.json verfügbar gemacht.
Quicklink konfigurieren
An dieser Stelle müssen Sie die Quicklink-Bibliothek in Ihrem Projekt installieren. Der Einfachheit halber haben wir ihn bereits dem Projekt hinzugefügt. Dazu müssten Sie folgenden Befehl ausführen:
npm install --save quicklink
src/components/App/index.js zum Bearbeiten öffnen.
Importieren Sie zuerst die höhere Quicklink-Komponente (HOC):
import React, { lazy, Suspense } from 'react';
import { Route } from 'react-router-dom';
import Footer from '@components/Footer';
import Hero from '@components/Hero';
import style from './index.module.css';
import { withQuicklink } from 'quicklink/dist/react/hoc.js';
const Home = lazy(() => import(/* webpackChunkName: "home" */ '@pages/Home'));
const About = lazy(() => import(/* webpackChunkName: "about" */ '@pages/About'));
const Article = lazy(() => import(/* webpackChunkName: "article" */ '@pages/Article'));
const Blog = lazy(() => import(/* webpackChunkName: "blog" */ '@pages/Blog'));
Erstellen Sie als Nächstes nach der Deklaration der Variablen Blog ein options-Objekt, das beim Aufrufen von quicklink als Argument verwendet werden soll:
const options = {
origins: []
};
Fügen Sie abschließend jede Route mit der withQuicklink()-Komponente höherer Ordnung ein und übergeben Sie einen options-Parameter sowie die Zielkomponente für diese Route:
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 vorherige Code weist an, Blöcke für die Routen, die mit withQuicklink() umschlossen sind, vorab abzurufen, wenn der Link in der Ansicht angezeigt wird.
Noch einmal messen
Wiederholen Sie die ersten sechs Schritte unter Messen. Wechseln Sie noch nicht zur Blog-Seite.
Wenn die Startseite geladen wird, werden die Blöcke für diese Route geladen. Danach ruft Quicklink die Teile der Route für die Links im Darstellungsbereich vorab ab:
Diese Blöcke werden mit der niedrigsten Priorität angefordert, ohne dass die Seite blockiert wird.
Nächstes Video:
- Löschen Sie das Netzwerkprotokoll erneut.
- Deaktivieren Sie das Kästchen Cache deaktivieren.
- Klicken Sie auf den Link Blog, um zu dieser Seite zu gelangen.
Die Spalte Größe gibt an, dass diese Blöcke aus dem "Prefetch-Cache" und nicht aus dem Netzwerk abgerufen wurden. Das Laden dieser Blöcke ohne Quicklink dauerte ungefähr 580 ms. Bei Verwendung der Bibliothek dauert der Vorgang jetzt 2 ms, was einer 99 %-Reduzierung entspricht.