Уменьшение размера бандла

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

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/home',
    name: 'Home',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('./views/About.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

Ключевые моменты:

  • Функция import() возвращает промис, и компонент загружается только при навигации к соответствующему маршруту.
  • Такой подход уменьшает размер основного бандла и ускоряет первоначальную загрузку приложения.
  • Можно создавать отдельные чанки для разных страниц или секций приложения, управляя именами через Webpack:
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')

Группировка и разделение чанков

Vue Router в сочетании с Webpack позволяет объединять несколько маршрутов в один чанк. Это полезно для страниц, которые часто используются вместе.

const routes = [
  {
    path: '/dashboard',
    name: 'Dashboard',
    component: () => import(/* webpackChunkName: "dashboard" */ './views/Dashboard.vue')
  },
  {
    path: '/settings',
    name: 'Settings',
    component: () => import(/* webpackChunkName: "dashboard" */ './views/Settings.vue')
  }
]

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

  • Одновременная загрузка связанных компонентов.
  • Контроль над количеством HTTP-запросов.
  • Возможность выделять наиболее критичные маршруты в отдельные чанки.

Использование route-level code-splitting

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

Пример конфигурации с вложенными маршрутами:

const routes = [
  {
    path: '/user',
    component: () => import('./views/UserLayout.vue'),
    children: [
      {
        path: 'profile',
        name: 'UserProfile',
        component: () => import('./views/UserProfile.vue')
      },
      {
        path: 'posts',
        name: 'UserPosts',
        component: () => import('./views/UserPosts.vue')
      }
    ]
  }
]

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

  • Родительский компонент (UserLayout.vue) загружается один раз.
  • Дочерние компоненты загружаются только при переходе к конкретным маршрутам.
  • Позволяет минимизировать первоначальный размер бандла и оптимизировать производительность.

Пререндеринг и предзагрузка маршрутов

Vue Router поддерживает предзагрузку компонентов для улучшения UX. Это полезно для маршрутов, которые пользователь вероятно откроет сразу после текущего.

const About = () => import('./views/About.vue')
const Home = () => import('./views/Home.vue')

About.preload = true

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

Важные моменты:

  • Метка preload позволяет браузеру заранее начать загрузку компонента.
  • Используется в сочетании с динамическим импортом для оптимизации маршрутов.
  • Поддержка современных сборщиков, таких как Webpack и Vite, позволяет тонко настраивать стратегию загрузки.

Настройка ленивой загрузки с Vite

Vite автоматически поддерживает динамический импорт, что упрощает настройку ленивой загрузки. Для создания отдельных чанков достаточно использовать стрелочную функцию:

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/contact',
      name: 'Contact',
      component: () => import('./views/Contact.vue')
    }
  ]
})

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

  • Автоматическое создание именованных чанков на основе пути файла.
  • Минимальная конфигурация по сравнению с Webpack.
  • Поддержка HMR для ленивых компонентов без перезагрузки всего приложения.

Рекомендации по уменьшению размера бандла

  1. Избегать глобального импорта библиотек – импортировать только необходимые функции.
  2. Использовать динамический импорт для больших страниц и модулей.
  3. Группировать маршруты с похожими компонентами для оптимизации числа HTTP-запросов.
  4. Применять предзагрузку ключевых маршрутов для улучшения UX.
  5. Контролировать размер чанков и использовать анализ бандла (webpack-bundle-analyzer или rollup-plugin-visualizer).

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

Оглавление