Навіщо ліниве завантаження компонентів маршрутів і як його налаштувати?

Якщо всі сторінки імпортовані статично, збирач кладе їх в один бандл: користувач, що відкрив головну, завантажує й код адмінки, звітів і налаштувань.

Ліниве завантаження - замість компонента передається функція, що його імпортує:

const routes = [
  { path: '/', component: () => import('./pages/Home.vue') },
  { path: '/reports', component: () => import('./pages/Reports.vue') },
  {
    path: '/admin',
    component: () => import('./layouts/AdminLayout.vue'),
    children: [
      { path: 'users', component: () => import('./pages/admin/Users.vue') },
    ],
  },
];

Vite бачить динамічний import() і виносить кожну сторінку в окремий файл. Він завантажується лише при першому переході на маршрут, а далі береться з кешу.

Що це дає:

• менший початковий бандл - сторінка швидше стає інтерактивною;
• рідко потрібні частини (адмінка, звіти з важкими бібліотеками графіків) не завантажуються більшості користувачів.

Пастки:

• не використовуйте defineAsyncComponent для маршрутів - роутер сам уміє чекати на функцію-імпорт; defineAsyncComponent - для асинхронних компонентів усередині сторінок;
• помилка завантаження частини після деплою. Користувач з давно відкритою вкладкою переходить на маршрут, а файл старої збірки вже видалено з сервера. Варто обробити router.onError() і перезавантажити сторінку, а Vite генерує подію vite:preloadError;
• затримка першого переходу - для очікуваних маршрутів частину можна підвантажити заздалегідь (при наведенні на посилання);
• не дробити надто сильно: окремий файл для кожного дрібного маршруту - багато дрібних запитів. Пов'язані сторінки можна групувати.

У маршрутизації на основі файлів (Vue Router 5) сторінки з src/pages лінивими робляться автоматично.

Докладніше в документації: Vue Router: ліниве завантаження