Запропонувати правку

Покращити цю статтю

Допрацюйте відповідь до «Що таке lazy loading components?». Ваші зміни проходять модерацію перед публікацією.

Потрібне підтвердження

Контент

Що ви змінюєте

Заголовок (UA)

Коротка відповідь (UA)

Показується над повною відповіддю для швидкого нагадування.

Відповідь (UA)

**Lazy loading components** - це техніка, при якій компоненти **завантажуються не одразу під час завантаження застосунку, а лише тоді, коли вони реально знадобляться**.

Простіше кажучи:

> **Lazy loading = "лінива загрузка" компонентів за потреби.**
> Це зменшує розмір початкового бандла і пришвидшує завантаження застосунку.

---

## Навіщо потрібен lazy loading компонентів?

У звичайному SPA:

- весь код застосунку потрапляє в **один великий бандл**
- завантаження триває довше
- особливо погано в мобільних мережах

Lazy loading вирішує проблему:

- великі або рідко використовувані компоненти завантажуються лише за потреби
- застосунок завантажується швидше
- користувач отримує UI швидше
- знижується TTI (Time To Interactive)

---

## Приклад з реального життя

У тебе є:

- сторінка "Адмінка" (admin)
- сторінка "Статистика"
- сторінка "Налаштування"

Користувач заходить лише на головну сторінку →
не потрібно одразу завантажувати весь код адмінки і статистики.

---

## Lazy loading у Vue 3 (динамічний імпорт)

Vue дозволяє завантажувати компонент ліниво за допомогою функції `defineAsyncComponent` або просто динамічного імпорту.

#### Найпростіший варіант:

```vue
<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPanel = defineAsyncComponent(() =>
  import('./components/AdminPanel.vue')
)
</script>

<template>
  <AdminPanel />
</template>
```

Компонент `AdminPanel.vue` буде завантажений **лише тоді, коли його вперше потрібно відрендерити**.

---

## Простіший спосіб (часто використовується):

```js
const AdminPanel = () => import('./components/AdminPanel.vue')
```

Vue сам розуміє, що це асинхронний компонент.

---

## Lazy loading компонентів у маршрутах (Vue Router)

Це найпоширеніший спосіб.

```js
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 завантажує такі компоненти лише в момент їх першого використання, зазвичай через динамічні імпорти.**
> **Це зменшує розмір початкового бандла і пришвидшує завантаження застосунку.**

Markdown · перетягуйте зображення · ⌘B / ⌘I шорткати373 слів

Для рев’юера

Примітка для модератора (необов’язково)

Бачить лише модератор. Прискорює рев’ю.