Як розділити застосунок Vue на частини за маршрутами?

Question

Accepted Answer

Без розділення весь застосунок - усі сторінки, адмінка, рідко потрібні розділи - потрапляє в один JavaScript-файл. Користувач, що відкрив головну, завантажує і код сторінки налаштувань, і графіки звітів.
Ліниві маршрути - компонент сторінки задається функцією з динамічним import():
const routes = [
  { path: '/', component: () => import('./pages/Home.vue') },
  { path: '/orders', component: () => import('./pages/Orders.vue') },
  { path: '/reports', component: () => import('./pages/Reports.vue') },
]

Збирач (Vite) виносить кожну сторінку разом з її унікальними залежностями в окремий файл. Він завантажується при першому переході на маршрут.
Не використовувати defineAsyncComponent для маршрутів - Vue Router сам уміє працювати з функцією, що повертає Promise; обгортка лише заважає.
Групування в одну частину - кілька пов'язаних сторінок разом (наприклад, розділ адмінки), щоб не робити три запити поспіль. У Vite це налаштовується через опції збирання (manualChunks / групування частин).
Що варто знати:

затримка першого переходу: при кліку на маршрут код ще треба завантажити. Допомагає попереднє завантаження (<link rel="modulepreload">, завантаження при наведенні на посилання) і показ індикатора завантаження;
помилки завантаження після деплою: якщо користувач тримав вкладку відкритою, а файли старої збірки видалили, перехід падає. router.onError - місце, щоб обробити це (наприклад, перезавантажити сторінку на новий URL);
головна сторінка - не робіть лінивою найчастішу точку входу, якщо це не дає реального виграшу: це лише додатковий запит;
спільні залежності (Vue, Pinia, бібліотека компонентів) збирач виносить в окремий спільний файл автоматично.

В Inertia-застосунках (Laravel + Vue) роль маршрутів виконують сторінки Inertia, і розділення налаштовується в resolve через import.meta.glob('./Pages/**/*.vue') - без { eager: true } кожна сторінка стає окремою частиною.
Як перевірити результат: rollup-plugin-visualizer показує, що потрапило в кожну частину і скільки важить.
Докладніше в документації: Vue Router: ліниве завантаження маршрутів

Як розділити застосунок Vue на частини за маршрутами?

Схожі питання