Ускорьте навигацию в React с помощью Quicklink

Автоматическая предварительная выборка ссылок в области просмотра с помощью быстрой ссылки для одностраничных приложений React.

Адди Османи
Addy Osmani
X GitHub
Антон Карловский
Демиан Рензулли

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

В многостраничных приложениях библиотека предварительно выбирает документы (например, /article.html ) для ссылок в области просмотра, чтобы, когда пользователь нажимает на эти ссылки, их можно было получить из кэша HTTP .

В одностраничных приложениях обычно используется метод, называемый разделением кода на основе маршрутов . Это позволяет сайту загружать код для данного маршрута только тогда, когда пользователь переходит по нему. Эти файлы (JS, CSS) обычно называют «кусками».

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

Достижение этого сопряжено с некоторыми трудностями:

  • Определить, какие фрагменты (например, article.chunk.js ) связаны с данным маршрутом (например, /article ) перед тем, как попасть на него, непросто.
  • Окончательные имена URL-адресов этих фрагментов невозможно предсказать, поскольку современные сборщики модулей обычно используют долгосрочное хеширование для управления версиями (например, article.chunk.46e51.js ).

В этом руководстве объясняется, как Quicklink решает эти проблемы и позволяет добиться масштабной предварительной загрузки в одностраничных приложениях React.

Определите фрагменты, связанные с каждым маршрутом

Одним из основных компонентов quicklink является webpack-route-manifest , плагин веб-пакета , который позволяет генерировать словарь маршрутов и фрагментов JSON. Это позволяет библиотеке знать, какие файлы потребуются для каждого маршрута приложения, и предварительно выбирать их по мере поступления маршрутов в поле зрения.

После интеграции плагина с проектом он создаст файл манифеста JSON, связывающий каждый маршрут с соответствующими частями:

{
  '/about': [
    {
      type: 'style',
      href: '/static/css/about.f6fd7d80.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/about.1cdfef3b.chunk.js',
    },
  ],
  '/blog': [
    {
      type: 'style',
      href: '/static/css/blog.85e80e75.chunk.css',
    },
    {
      type: 'script',
      href: '/static/js/blog.35421503.chunk.js',
    },
  ],
}

Этот файл манифеста можно запросить двумя способами:

  • По URL-адресу, например https://site_url/rmanifest.json .
  • Через объект окна, в window.__rmanifest .

Предварительная выборка фрагментов для маршрутов в области просмотра

Как только файл манифеста станет доступен, следующим шагом будет установка Quicklink, запустив npm install quicklink .

Затем можно использовать компонент более высокого порядка (HOC) withQuicklink() чтобы указать, что данный маршрут должен быть предварительно выбран, когда ссылка появляется в представлении.

Следующий код принадлежит компоненту App приложения React, который отображает верхнее меню с четырьмя ссылками:

const App = () => (
  <div className={style.app}>
    <Hero />
    <main className={style.wrapper}>
      <Suspense fallback={<div>Loading…</div>}>
        <Route path="/" exact component={Home} />
        <Route path="/blog" exact component={Blog} />
        <Route path="/blog/:title" component={Article} />
        <Route path="/about" exact component={About} />
      </Suspense>
    </main>
    <Footer />
  </div>
);

Чтобы сообщить Quicklink, что эти маршруты должны быть предварительно загружены по мере их появления:

  1. Импортируйте HOC quicklink в начало компонента.
  2. Оберните каждый маршрут с помощью HOC withQuicklink() , передав ему компонент страницы и параметр options. 
const options = {
  origins: [],
};
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>
);

HOC withQuicklink() использует путь маршрута в качестве ключа для получения связанных фрагментов из rmanifest.json . Под капотом, когда ссылки появляются в представлении, библиотека вставляет тег <link rel="prefetch"> на страницу для каждого фрагмента, чтобы их можно было предварительно загрузить. Предварительно загруженные ресурсы будут запрошены браузером с наименьшим приоритетом и сохранены в HTTP-кеше в течение 5 минут, после чего применяются правила cache-control ресурса. В результате, когда пользователь нажимает на ссылку и переходит к заданному маршруту, фрагменты будут извлечены из кеша, что значительно сокращает время, необходимое для визуализации этого маршрута.

Заключение

Предварительная выборка может значительно сократить время загрузки для будущих навигаций. В одностраничных приложениях React этого можно добиться, загружая фрагменты, связанные с каждым маршрутом, до того, как в них попадет пользователь. Решение Quicklink для React SPA использует webpack-route-manifest для создания карты маршрутов и фрагментов, чтобы определить, какие файлы следует предварительно загрузить, когда ссылка появляется в представлении. Внедрение этого метода на вашем сайте может значительно улучшить навигацию до такой степени, что она станет мгновенной.