Vorabruf in „create/react-app“ mit Quicklink

Addy Osmani
Addy Osmani
X GitHub
Anton Karlovskiy
Anton Karlovskiy
X GitHub Störung
Demián Renzulli
Demián Renzulli
X GitHub Störung

In diesem Codelab erfahren Sie, wie Sie die Quicklink-Bibliothek in einer React SPA-Demo implementieren, um zu zeigen, wie der Vorabruf nachfolgende Navigationen beschleunigt.

Messen

Bevor Sie Optimierungen hinzufügen, sollten Sie immer zuerst den aktuellen Status der Anwendung analysieren.

  • Klicke auf Zu bearbeitende Remixe, damit das Projekt bearbeitet werden kann.
  • Um die Website als Vorschau anzusehen, wählen Sie App ansehen und dann Vollbild Vollbild aus.

Die Website ist eine einfache Demo, die mit create-react-app erstellt wurde.

Führen Sie in dem soeben geöffneten Tab die folgenden Schritte aus:

  1. Drücken Sie Strg + Umschalttaste + J (oder Befehlstaste + Option + J auf dem Mac), um die Entwicklertools zu öffnen.
  2. Klicken Sie auf den Tab Netzwerk.
  3. Klicken Sie das Kästchen Cache deaktivieren an.
  4. Wählen Sie in der Drop-down-Liste Drosselung die Option Schnelles 3G aus, um eine langsame Verbindung zu simulieren.
  5. Aktualisieren Sie die App.
  6. Geben Sie chunk in das Filtertextfeld ein, um alle Ressourcen auszublenden, die chunk nicht im Namen enthalten.

Netzwerkbereich mit den Startseitenblöcken.

Auf der Website wird die routenbasierte Codeaufteilung verwendet, bei der zu Beginn nur der erforderliche Code angefordert wird.

  1. Lösche die Netzwerkanfragen in den Entwicklertools.
  2. Klicken Sie in der App auf den Link Blog, um diese Seite aufzurufen.

Die JS- und CSS-Chunks für die neue Route werden geladen, um die Seite zu rendern.

Der Bereich „Netzwerk“ mit den Blogseiten-Chunks.

Als Nächstes implementieren Sie Quicklink auf dieser Website, sodass diese Blöcke auf der Startseite vorab abgerufen werden können. Dies beschleunigt die Navigation.

So können Sie das Beste aus beiden Verfahren kombinieren:

  • Durch die routenbasierte Codeaufteilung wird der Browser angewiesen, zum Zeitpunkt des Seitenaufbaus nur die notwendigen Blöcke mit höherer Priorität zu laden.
  • Durch den Vorabruf wird der Browser angewiesen, die Blöcke für Links im Darstellungsbereich während der Inaktivität des Browsers mit der niedrigsten Priorität zu laden.

webpack-route-manifest konfigurieren

Als Erstes installieren und konfigurieren Sie webpack-route-manifest, ein Webpack-Plug-in, mit dem Sie eine Manifestdatei generieren können, die Routen den entsprechenden Blöcken zuordnet.

Normalerweise müssten Sie die Bibliothek installieren, aber wir haben das bereits für Sie erledigt. Hier ist der Befehl, den Sie ausführen müssen:

npm install webpack-route-manifest --save-dev

config-overrides.js ist eine Datei im Stammverzeichnis Ihres Projekts. Dort können Sie das vorhandene Verhalten der Webpack-Konfiguration überschreiben, ohne das Projekt ausschließen zu müssen.

  • Um die Quelle aufzurufen, drücken Sie Quelle 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 webpack-route-manifest-Plug-in. Dazu fügen Sie am Ende von config-overrides.js den folgenden Code ein:

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 bewirkt Folgendes:

  • config.resolve deklariert Variablen mit den internen Routen zu Seiten, Assets und Komponenten.
  • config.plugins.push() erstellt ein RouteManifest-Objekt und übergibt ihm die Konfiguration, sodass die Datei rmanifest.json basierend auf den Routen und Blöcken der Website generiert werden kann.

Die Datei manifest.json wird erstellt und unter https://site_url/rmanifest.json verfügbar gemacht.

Jetzt müssen Sie die Quicklink-Bibliothek in Ihrem Projekt installieren. Der Einfachheit halber haben wir es bereits in das Projekt aufgenommen. Hier ist der Befehl, den Sie ausführen müssen:

npm install --save quicklink

src/components/App/index.js zur Bearbeitung öffnen.

Importieren Sie zunächst die übergeordnete 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'));

Als Nächstes erstellen Sie nach der Variablendeklaration Blog ein options-Objekt, das beim Aufrufen von quicklink als Argument verwendet wird:

const options = {
    origins: []
};

Fassen Sie zum Schluss jede Route mit der höherrangigen withQuicklink()-Komponente zusammen. Übergeben Sie ihr dabei einen options-Parameter und 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>
);

Mit dem vorherigen Code werden Blöcke für die mit withQuicklink() verpackten Routen vorab abgerufen, wenn der Link in der Ansicht angezeigt wird.

Noch einmal messen

Wiederholen Sie die ersten sechs Schritte unter Messen. Gehe noch nicht zur Blogseite.

Wenn die Startseite lädt, werden die Blöcke für diese Route geladen. Danach ruft Quicklink die Routenblöcke für die Links im Darstellungsbereich vorab ab:

Netzwerkbereich mit den Blöcken für den Vorabruf der Startseite.

Diese Blöcke werden mit der niedrigsten Priorität angefordert, ohne die Seite zu blockieren.

Nächstes Video:

  1. Lösche das Netzwerkprotokoll noch einmal.
  2. Deaktivieren Sie das Kästchen Cache deaktivieren.
  3. Klicken Sie auf den Link Blog, um zu dieser Seite zu gelangen.

Netzwerkbereich mit der Blogseite mit Blöcken aus dem Cache.

Aus der Spalte Größe geht hervor, dass diese Blöcke aus dem Prefetch-Cache und nicht aus dem Netzwerk abgerufen wurden. Das Laden dieser Blöcke ohne Quicklink dauerte etwa 580 ms. Wenn Sie die Bibliothek verwenden, dauert es nun 2 ms, was einer Reduzierung von 99% entspricht.