Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке lazy loading маршрутів?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Lazy loading маршрутів** - це техніка, за якої компоненти маршрутів завантажуються **не одразу під час старту застосунку**, а **лише тоді, коли користувач уперше переходить на відповідний маршрут**. **Ключове:** компонент завантажується тільки в момент переходу на нього, що значно зменшує розмір бандла при першому відкритті сторінки та пришвидшує завантаження SPA.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Lazy loading маршрутів** - це техніка, за якої компоненти маршрутів завантажуються **не одразу під час старту застосунку**, а **лише тоді, коли користувач уперше переходить на відповідний маршрут**. Простіше кажучи: > **Lazy loading - це «лінива» підвантаження сторінок.** > **Компонент завантажується лише в момент переходу на нього.** Це значно зменшує розмір бандла при першому відкритті сторінки та пришвидшує завантаження SPA. --- ## Короткий приклад lazy loading маршруту ```js const routes = [ { path: '/about', component: () => import('../views/About.vue') } ] ``` Тут: - `() => import()` - це динамічний імпорт - Webpack/Vite автоматично створюють окремий chunk-файл - файл завантажиться лише коли користувач відкриє `/about` --- ## Навіщо потрібен lazy loading? 1. **Зменшує початковий розмір бандла** (особливо якщо в застосунку > 20 сторінок) 2. **Пришвидшує завантаження застосунку** Користувач швидше бачить перший екран (LCP). 3. **Оптимізація SSR і SEO** Маршрути підвантажуються, коли потрібно. 4. **Працює «з коробки» у 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 → теж ліниво ```Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.