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:
- Naciśnij „Control + Shift + J” (lub „Command + Option + J” na Macu), aby otworzyć Narzędzia deweloperskie.
- Kliknij kartę Sieć.
- Zaznacz pole wyboru Wyłącz pamięć podręczną.
- Z listy Ograniczanie wybierz Szybkie 3G, aby symulować powolne połączenie.
- Załaduj ponownie aplikację.
- 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.
- Wyczyść żądania sieciowe w Narzędziach deweloperskich.
- 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 obiektRouteManifest
i przekazuje do niego konfigurację tak, aby plikrmanifest.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:
- Ponownie wyczyść dziennik sieci.
- Usuń zaznaczenie pola wyboru Disable cache (Wyłącz pamięć podręczną).
- 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.