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

Addy Osmani

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 kolejne etapy nawigacji.

Zmierz odległość

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

• Aby umożliwić edytowanie projektu, kliknij Zremiksuj do edycji.
• Aby wyświetlić podgląd strony, kliknij Wyświetl aplikację, a potem Pełny ekran .

Strona to prosta prezentacja utworzona przy użyciu polecenia create-react-app.

Na nowej karcie, która została właśnie 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. Z listy Ograniczanie wybierz Szybkie 3G, aby symulować powolne połączenie.
5. Załaduj ponownie aplikację.
6. Wpisz chunk w polu tekstowym filtra, aby ukryć wszystkie zasoby, które nie zawierają chunk w nazwie.

W witrynie zastosowano dzielenie kodu na podstawie tras, dzięki czemu na początku wymagane jest żądanie tylko niezbędnego kodu.

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

Fragmenty JS i CSS nowej trasy są wczytywane w celu renderowania strony.

Następnie zaimplementujesz w tej witrynie szybkie linki, aby umożliwić wstępne pobieranie tych fragmentów na stronie głównej, co przyspieszy nawigację.

Dzięki temu możesz połączyć to, co najlepsze w obu technikach:

• Dzielenie kodu na podstawie tras informuje przeglądarkę, aby podczas wczytywania strony ładować tylko te fragmenty o wyższym priorytecie.
• Wstępne wczytywanie informuje przeglądarkę, że w czasie bezczynności przeglądarki ma wczytywać fragmenty linków w widocznym obszarze o najniższym priorytecie.

Skonfiguruj webpack-route-manifest

Pierwszym krokiem jest zainstalowanie i skonfigurowanie webpack-route-manifest, czyli wtyczki pakietu webpack, która umożliwia wygenerowanie pliku manifestu, który wiąże trasy z odpowiadającymi im fragmentami.

Zwykle wymaga to zainstalowania biblioteki, ale już to zrobiliśmy. Oto polecenie, które musisz 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 działanie 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 do edycji 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 ten kod na dole elementu 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 te operacje:

• Tag config.resolve deklaruje zmienne z wewnętrznymi trasami do stron, zasobów i komponentów.
• config.plugins.push() tworzy obiekt RouteManifest i przekazuje do niego 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.

Skonfiguruj szybki link

Teraz musisz zainstalować w projekcie bibliotekę Quicklink. Dla uproszczenia dodaliśmy już tę funkcję do projektu. Oto polecenie, które musisz uruchomić:

npm install --save quicklink

Otwórz src/components/App/index.js, by edytować.

Najpierw zaimportuj komponent szybkiego linku (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, aby używać go jako argumentu przy wywoływaniu funkcji quicklink:

const options = {
    origins: []
};

Na koniec opakuj każdą trasę komponentem wyższego rzędu withQuicklink(), 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 zawartych w komponencie withQuicklink(), gdy link pojawia się w widoku.

Przeprowadź pomiar ponownie

Powtórz pierwsze 6 kroków z Pomiaru. Nie przechodź jeszcze na stronę bloga.

Kiedy strona główna wczytuje fragmenty trasy, Następnie Quicklink pobiera z wyprzedzeniem fragmenty trasy dla linków widocznych w widocznym obszarze:

Te fragmenty są wysyłane z najniższym priorytetem i nie blokują strony.

Następny:

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

Kolumna Rozmiar wskazuje, że 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 stanowi o 99% mniej.