Що таке lazy loading маршрутів?
Lazy loading маршрутів - це техніка, за якої компоненти маршрутів завантажуються не одразу під час старту застосунку, а лише тоді, коли користувач уперше переходить на відповідний маршрут.
Простіше кажучи:
Lazy loading - це «лінива» підвантаження сторінок. Компонент завантажується лише в момент переходу на нього.
Це значно зменшує розмір бандла при першому відкритті сторінки та пришвидшує завантаження SPA.
Короткий приклад lazy loading маршруту
js
const routes = [
{
path: '/about',
component: () => import('../views/About.vue')
}
]Тут:
() => import()- це динамічний імпорт- Webpack/Vite автоматично створюють окремий chunk-файл
- файл завантажиться лише коли користувач відкриє
/about
Навіщо потрібен lazy loading?
- Зменшує початковий розмір бандла (особливо якщо в застосунку > 20 сторінок)
- Пришвидшує завантаження застосунку Користувач швидше бачить перший екран (LCP).
- Оптимізація SSR і SEO Маршрути підвантажуються, коли потрібно.
- Працює «з коробки» у Vue Router Не потребує складного налаштування.
Як це працює під капотом?
import()повертає Promise.- Vue Router чекає завантаження файлу.
- Коли завантаження завершено -> рендерить компонент.
У бандлі з'явиться окремий chunk, наприклад:
about.[hash].js
Приклад з іменем чанка (Webpack)
js
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')Lazy loading і вкладені маршрути
Працює точно так само:
js
{
path: '/users/:id',
component: () => import('@/pages/User.vue'),
children: [
{
path: 'posts',
component: () => import('@/pages/UserPosts.vue')
}
]
}Lazy loading + групи маршрутів
Можна розділяти застосунок на логічні модулі, наприклад:
/admin → завантажується лише коли потрібен
/account → теж ліниво
/dashboard → теж лінивоКоротка відповідь
Для співбесідиPremium
Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.