Prefetch стратегии

Prefetch стратегии в Vue Router позволяют оптимизировать загрузку ресурсов и улучшить пользовательский опыт за счёт предварительной загрузки компонентов маршрутов, данных или асинхронных модулей до их непосредственного использования. Эти стратегии особенно актуальны для приложений с большим количеством страниц и тяжёлыми компонентами.

Асинхронные маршруты

В Vue Router маршруты могут быть определены с использованием асинхронной подгрузки компонентов:

const routes = [
  {
    path: '/dashboard',
    component: () => import('@/views/Dashboard.vue')
  }
];

При таком подходе компонент Dashboard.vue будет загружен только при переходе на маршрут /dashboard. Это снижает первоначальный размер бандла, но может привести к задержке при первом открытии страницы.

Prefetch через webpackPrefetch

Webpack поддерживает директиву webpackPrefetch, которая позволяет загружать асинхронные чанки в фоновом режиме после загрузки основного кода:

const routes = [
  {
    path: '/dashboard',
    component: () => import(
      /* webpackPrefetch: true */ '@/views/Dashboard.vue'
    )
  }
];

Особенности:

  • Браузер загружает ресурс с низким приоритетом.
  • Используется только для следующих страниц, которые пользователь скорее всего откроет.
  • Не блокирует рендер текущей страницы.

Prefetch данных для маршрута

Предварительная загрузка данных может быть реализована через навигационные охранники (beforeEnter) или через Composition API внутри компонентов:

const routes = [
  {
    path: '/profile/:id',
    component: () => import('@/views/Profile.vue'),
    beforeEnter: async (to, from, next) => {
      try {
        const userData = await fetchUser(to.params.id);
        to.meta.userData = userData;
        next();
      } catch (error) {
        next('/error');
      }
    }
  }
];

Преимущества:

  • Данные доступны сразу при рендере компонента.
  • Возможность кэширования через meta объекта маршрута.

Lazy Load с предзагрузкой через Intersection Observer

Для компонентов, которые отображаются в виде ленивых модулей на странице (например, секции, появляющиеся при скролле), можно использовать Intersection Observer:

Преимущества:

  • Компонент загружается только при необходимости.
  • Снижает нагрузку на сеть и ускоряет первичную загрузку страницы.

Prefetch с помощью роутера и событий навигации

Vue Router предоставляет хук router.beforeEach, который можно использовать для предзагрузки компонентов перед фактическим переходом:

router.beforeEach((to, from, next) => {
  if (to.path === '/dashboard') {
    import('@/views/Dashboard.vue');
  }
  next();
});

Этот подход позволяет запускать фоновую загрузку компонентов ещё до перехода, ускоряя последующий рендер.

Стратегии предзагрузки в комбинации

Для сложных SPA оптимально сочетать несколько стратегий:

  1. webpackPrefetch — для страниц, которые пользователь скорее всего откроет.
  2. Lazy load с Intersection Observer — для компонентов, появляющихся при скролле.
  3. Prefetch данных через beforeEnter или Composition API — для критичных данных маршрута.
  4. Router hook — для дополнительных предзагрузок или кэширования компонентов.

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

Метрики и отслеживание

Для оценки эффективности prefetch стратегий полезно использовать:

  • Chrome DevTools Network — проверить, когда загружаются чанки.
  • Vue Devtools — контролировать состояние кэшированных маршрутов и данных.
  • Логи производительности — измерять время до интерактивности (Time to Interactive) для маршрутов.

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

Оглавление