Pobieranie z wyprzedzeniem w aplikacji create-react-app za pomocą Quicklink

Addy Osmani
Addy Osmani
X GitHub
Anton Karlovskiy
Demián Renzulli

Dzięki temu ćwiczeniu w Codelabs dowiesz się, jak wdrożyć bibliotekę Quicklink w wersji demonstracyjnej React SPA, aby zademonstrować, jak pobieranie z wyprzedzeniem przyspiesza późniejszą nawigację.

Zmierz odległość

Przed dodaniem optymalizacji zawsze warto najpierw przeanalizować bieżący stan aplikacji.

  • Aby udostępnić projekt do edycji, kliknij Remiksuj, aby edytować.
  • Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację. Następnie naciśnij Pełny ekran pełny ekran

Jest to prosta wersja demonstracyjna utworzona w aplikacji create-react-app.

Na nowej karcie, która właśnie została otwarta, wykonaj te czynności:

  1. Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
  2. Kliknij kartę Sieć.
  3. Zaznacz pole wyboru Wyłącz pamięć podręczną.
  4. Aby symulować wolne połączenie, na liście Ograniczanie wybierz Szybkie 3G.
  5. Załaduj ponownie aplikację.
  6. Wpisz chunk w polu Filtr tekstowy, aby ukryć wszystkie zasoby, które nie mają w nazwie słowa chunk.

Panel sieci przedstawiający fragmenty strony głównej.

W witrynie stosowany jest podział kodu na podstawie tras, dzięki któremu na początku wymagany jest tylko niezbędny kod.

  1. Wyczyść żądania sieciowe w Narzędziach deweloperskich.
  2. W aplikacji kliknij link Blog, aby przejść na tę stronę.

W celu wyrenderowania strony zostaną wczytane fragmenty JS i CSS dla nowej trasy.

Panel sieci przedstawiający fragmenty strony bloga.

Następnie wdrożysz w witrynie Quicklink, co pozwoli wstępnie pobrać te fragmenty na stronę główną i przyspieszyć nawigację.

Dzięki temu można połączyć najlepsze cechy obu metod:

  • Dzielenie kodu na podstawie trasy informuje przeglądarkę, że podczas wczytywania strony ma wczytywać tylko niezbędne fragmenty o wyższym priorytecie.
  • Pobieranie z wyprzedzeniem informuje przeglądarkę, że w czasie jej bezczynności przeglądarka ładuje fragmenty linków w widocznym obszarze o najniższym priorytecie.

Skonfiguruj webpack-route-manifest

Pierwszym krokiem jest zainstalowanie i skonfigurowanie webpack-route-manifest – wtyczki pakietu internetowego, która umożliwia wygenerowanie pliku manifestu wiążącego trasy z odpowiednimi fragmentami.

Zazwyczaj trzeba samodzielnie zainstalować bibliotekę, ale my już to zrobiliśmy. Oto polecenia, które należy uruchomić:

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

config-overrides.js to plik umieszczony w katalogu głównym projektu, w którym możesz zastąpić dotychczasowe zachowanie konfiguracji pakietu internetowego bez konieczności wyrzucania projektu.

  • Aby wyświetlić źródło, kliknij Wyświetl źródło.

Otwórz plik config-overrides.js, aby go edytować, i dodaj zależność webpack-route-manifest na początku pliku:

const path = require('path');
const RouteManifest = require('webpack-route-manifest');

Następnie skonfiguruj wtyczkę webpack-route-manifest, dodając kod na końcu 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;
};

Nowy kod wykonuje takie operacje:

  • config.resolve deklaruje zmienne z wewnętrznymi trasami do stron, zasobów i komponentów.
  • config.plugins.push() tworzy obiekt RouteManifest i przekazuje mu konfigurację, tak aby plik rmanifest.json mógł zostać wygenerowany na podstawie tras i fragmentów witryny.

Plik manifest.json zostanie wygenerowany i udostępniony https://site_url/rmanifest.json.

W tym momencie musisz zainstalować w projekcie bibliotekę Quicklink. Dla uproszczenia już go dodaliśmy do projektu. Oto polecenia, które należy uruchomić:

npm install --save quicklink

Otwórz plik src/components/App/index.js do edycji.

Najpierw zaimportuj komponent Quicklink wyższego rzędu (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'));

Następnie utwórz obiekt options po deklaracji zmiennej Blog, który będzie używany jako argument przy wywoływaniu funkcji quicklink:

const options = {
    origins: []
};

Na koniec dodaj do każdej trasy komponent withQuicklink() określający wyższą kolejność, przekazując do niej parametr options i komponent docelowy tej trasy:

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

Poprzedni kod nakazuje wstępne pobieranie fragmentów tras opakowanych za pomocą atrybutu withQuicklink(), gdy link pojawi się w widoku.

Pomiar ponownie

Powtórz pierwsze 6 kroków z sekcji Pomiar. Nie wchodź jeszcze na stronę bloga.

Po wczytaniu strony głównej zostaną załadowane fragmenty tej trasy. Potem Quicklink pobierze z wyprzedzeniem fragmenty trasy dla linków w widocznym obszarze:

Panel sieci przedstawiający pobieranie fragmentów strony głównej z wyprzedzeniem.

Te fragmenty są żądane z najniższym priorytetem i bez blokowania strony.

Następny:

  1. Ponownie wyczyść dziennik sieci.
  2. Usuń zaznaczenie pola wyboru Wyłącz pamięć podręczną.
  3. Aby otworzyć tę stronę, kliknij link Blog.

Panel sieci przedstawiający stronę bloga z fragmentami pobranymi z pamięci podręcznej.

Kolumna Rozmiar wskazuje, że te fragmenty zostały pobrane z „pamięci podręcznej pobierania z wyprzedzeniem”, a nie z sieci. Wczytywanie tych fragmentów bez szybkiego linku trwało około 580 ms. Korzystanie z biblioteki zajmuje teraz 2 ms, co daje 99% spadku.