Предварительная выборка в приложении create-react-app с помощью Quicklink

Addy Osmani

Anton Karlovskiy

Demián Renzulli

В этой лаборатории кода показано, как реализовать библиотеку Quicklink в демонстрации React SPA, чтобы продемонстрировать, как предварительная выборка ускоряет последующую навигацию.

Мера

Прежде чем добавлять оптимизацию, всегда полезно сначала проанализировать текущее состояние приложения.

• Нажмите Remix to Edit , чтобы сделать проект доступным для редактирования.
• Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .

Веб-сайт представляет собой простую демонстрационную версию, созданную с помощью create-react-app .

Выполните следующие инструкции на новой вкладке, которая только что открылась:

1. Нажмите «Control+Shift+J» (или «Command+Option+J» на Mac), чтобы открыть DevTools.
2. Откройте вкладку «Сеть» .
3. Установите флажок Отключить кеш .
4. В раскрывающемся списке «Регулирование» выберите «Быстрый 3G» , чтобы имитировать медленный тип соединения.
5. Перезагрузите приложение.
6. Введите chunk в текстовое поле «Фильтр» , чтобы скрыть все ресурсы, в имени которых нет chunk .

На сайте используется разделение кода по маршрутам , благодаря чему в начале запрашивается только необходимый код.

1. Очистите сетевые запросы в DevTools .
2. В приложении нажмите ссылку «Блог» , чтобы перейти на эту страницу.

Для отрисовки страницы загружаются фрагменты JS и CSS для нового маршрута.

Далее вы внедрите Quicklink на этом сайте, чтобы эти фрагменты можно было предварительно загрузить на главной странице, что ускорит навигацию.

Это позволяет объединить лучшее из обеих техник:

• Разделение кода на основе маршрутов сообщает браузеру загружать только необходимые фрагменты с более высоким приоритетом во время загрузки страницы.
• Предварительная выборка сообщает браузеру загружать фрагменты для ссылок в области просмотра с самым низким приоритетом во время простоя браузера.

Настроить webpack-route-manifest

Первым шагом является установка и настройка webpack-route-manifest , плагина веб-пакета, который позволяет создавать файл манифеста, связывающий маршруты с соответствующими фрагментами.

Обычно вам необходимо установить библиотеку, но мы уже сделали это за вас. Вот команда, которую вам нужно будет запустить:

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

config-overrides.js — это файл, размещенный в корневом каталоге вашего проекта, где вы можете переопределить существующее поведение конфигурации веб-пакета без необходимости удаления проекта .

• Чтобы просмотреть источник, нажмите «Просмотреть источник» .

Откройте config-overrides.js для редактирования и добавьте зависимость webpack-route-manifest в начало файла:

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

Затем настройте плагин webpack-route-manifest добавив следующий код в конец 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;
};

Новый код делает следующее:

• config.resolve объявляет переменные с внутренними маршрутами к страницам, ресурсам и компонентам.
• config.plugins.push() создает объект RouteManifest и передает ему конфигурацию, чтобы файл rmanifest.json мог быть сгенерирован на основе маршрутов и фрагментов сайта.

Файл manifest.json будет создан и доступен по адресу https://site_url/rmanifest.json .

Настроить быструю ссылку

На этом этапе вам необходимо установить библиотеку Quicklink в ваш проект. Для простоты мы уже добавили его в проект. Вот команда, которую вам нужно будет запустить:

npm install --save quicklink

Откройте src/components/App/index.js для редактирования.

Сначала импортируйте компонент высшего порядка Quicklink (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'));

Затем создайте объект options после объявления переменной Blog , чтобы использовать его в качестве аргумента при вызове quicklink :

const options = {
    origins: []
};

Наконец, оберните каждый маршрут компонентом более высокого порядка withQuicklink() , передав ему параметр options и целевой компонент для этого маршрута:

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

Предыдущий код инструктирует предварительно выбирать фрагменты для маршрутов, обернутых с помощью withQuicklink() , когда ссылка попадает в поле зрения.

Измерьте еще раз

Повторите первые 6 шагов из Measure . Пока не переходите на страницу блога.

Когда домашняя страница загружается, загружаются фрагменты для этого маршрута. После этого Quicklink предварительно выбирает фрагменты маршрута для ссылок в окне просмотра:

Эти фрагменты запрашиваются с самым низким приоритетом и без блокировки страницы.

Следующий:

1. Очистите журнал сети еще раз.
2. Снимите флажок Отключить кэш .
3. Нажмите ссылку «Блог» , чтобы перейти на эту страницу.

Столбец «Размер» указывает, что эти фрагменты были получены из «кэша предварительной выборки», а не из сети. Загрузка этих фрагментов без Quicklink заняла примерно 580 мс . При использовании библиотеки это теперь занимает 2 мс , что означает сокращение на 99 % !