Автоматическая предварительная выборка ссылок в области просмотра с помощью быстрой ссылки для одностраничных приложений React.
Предварительная загрузка — это метод ускорения навигации за счет предварительной загрузки ресурсов для следующей страницы. 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, что эти маршруты должны быть предварительно загружены по мере их появления:
- Импортируйте HOC
quicklink
в начало компонента. - Оберните каждый маршрут с помощью 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
для создания карты маршрутов и фрагментов, чтобы определить, какие файлы следует предварительно загрузить, когда ссылка появляется в представлении. Внедрение этого метода на вашем сайте может значительно улучшить навигацию до такой степени, что она станет мгновенной.