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

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

Эдди Османи
Антон Карловский
Anton Karlovskiy
X GitHub
Демиан Рензулли
Demián Renzulli
X GitHub

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

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

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

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

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

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

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

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

Одним из основных компонентов quicklink является webpack-route-manifest , плагин webpack , который позволяет вам генерировать словарь маршрутов и фрагментов 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. Импортируйте quicklink HOC в начало компонента.
  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>
);

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

Заключение

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