Що таке lazy loading components?
Lazy loading components - це техніка, при якій компоненти завантажуються не одразу під час завантаження застосунку, а лише тоді, коли вони реально знадобляться.
Простіше кажучи:
Lazy loading = "лінива загрузка" компонентів за потреби. Це зменшує розмір початкового бандла і пришвидшує завантаження застосунку.
Навіщо потрібен lazy loading компонентів?
У звичайному SPA:
- весь код застосунку потрапляє в один великий бандл
- завантаження триває довше
- особливо погано в мобільних мережах
Lazy loading вирішує проблему:
- великі або рідко використовувані компоненти завантажуються лише за потреби
- застосунок завантажується швидше
- користувач отримує UI швидше
- знижується TTI (Time To Interactive)
Приклад з реального життя
У тебе є:
- сторінка "Адмінка" (admin)
- сторінка "Статистика"
- сторінка "Налаштування"
Користувач заходить лише на головну сторінку → не потрібно одразу завантажувати весь код адмінки і статистики.
Lazy loading у Vue 3 (динамічний імпорт)
Vue дозволяє завантажувати компонент ліниво за допомогою функції defineAsyncComponent або просто динамічного імпорту.
Найпростіший варіант:
<script setup>
import { defineAsyncComponent } from 'vue'
const AdminPanel = defineAsyncComponent(() =>
import('./components/AdminPanel.vue')
)
</script>
<template>
<AdminPanel />
</template>Компонент AdminPanel.vue буде завантажений лише тоді, коли його вперше потрібно відрендерити.
Простіший спосіб (часто використовується):
const AdminPanel = () => import('./components/AdminPanel.vue')Vue сам розуміє, що це асинхронний компонент.
Lazy loading компонентів у маршрутах (Vue Router)
Це найпоширеніший спосіб.
const routes = [
{
path: '/admin',
component: () => import('@/views/AdminView.vue')
}
]Завантаження сторінки "Адмінка" відбудеться лише тоді, коли користувач на неї перейде.
Переваги lazy loading
Зменшення розміру початкового бандла
Головна сторінка завантажується швидше.
Швидший TTI (Time To Interactive)
Менше JS → браузер швидше "оживає".
Оптимізація мережі
Користувач завантажує лише те, що реально потрібно.
Покращення UX
Застосунок відкривається миттєво.
Мінуси lazy loading (питають на рівні middle)
- перше завантаження лінивого компонента може бути трохи повільнішим (потрібно завантажити код)
- потрібно показувати "завантажувач" (loading state)
- складніше аналізувати бандли, якщо занадто багато лінивих чанків
Підсумок (ідеально для співбесіди)
Lazy loading components - це завантаження компонентів за потреби. Vue завантажує такі компоненти лише в момент їх першого використання, зазвичай через динамічні імпорти. Це зменшує розмір початкового бандла і пришвидшує завантаження застосунку.
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.