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

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

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

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

Контент

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

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

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

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

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

**Асинхронний компонент** - це компонент, який **завантажується не одразу**, а **за потреби**, коли він дійсно потрібен.
Тобто Vue не включає його в основний бандл, а підвантажує динамічно.

Простіше кажучи:
**Асинхронний компонент - це ліниво підвантажуваний компонент.**
Він допомагає зменшити розмір початкового бандла і пришвидшити завантаження сторінки.

---

## Навіщо потрібні асинхронні компоненти?

1. **Зменшення ваги бандла**
Великі компоненти (таблиці, графіки, адмін-панель) можна вантажити тільки там, де вони використовуються.
2. **Пришвидшення завантаження застосунку**
Менше даних → швидше стартує застосунок.
3. **Lazy-loading сторінок / модулів**
Можна вантажити компонент тільки при переході на певну сторінку.
4. **Покращення продуктивності на мобільних пристроях**
Пам'ять і CPU використовуються економно.

---

## Як створити асинхронний компонент у Vue 3?

Vue надає функцію:

```javascript
defineAsyncComponent()
```

---

### Простий приклад (лінивий імпорт)

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

const AsyncModal = defineAsyncComponent(() =>
  import('./Modal.vue')
)
</script>

<template>
  <AsyncModal />
</template>
```

Тепер `Modal.vue` завантажиться тільки тоді, коли компонент реально використовується на сторінці.

---

## Як це працює під капотом?

```javascript
import('./Modal.vue')
```

- це динамічний імпорт ES Modules.

Браузер сам створить *окремий chunk* (шматок бандла) і завантажить його тільки при першому використанні.

---

## Асинхронний компонент з fallback (станом завантаження)

Vue дозволяє вказати:

- компонент-заглушку (loading)
- таймаут
- компонент при помилці

Приклад:

```javascript
const AsyncModal = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorBlock,
  delay: 200,   // показувати спінер через 200 мс
  timeout: 3000 // помилка, якщо вантажиться більше 3 секунд
})
```

Використання:

```javascript
<AsyncModal />
```

---

## Асинхронні компоненти + <Suspense>

Vue 3 підтримує `<Suspense>` - він чекає на асинхронні компоненти.

Приклад:

```javascript
<Suspense>
  <template #default>
    <AsyncUserProfile />
  </template>

<template #fallback>
    <LoadingSpinner />
  </template>
</Suspense>
```

---

## Де асинхронні компоненти використовують найчастіше?

#### Lazy-loading сторінок

```javascript
const PageHome = defineAsyncComponent(() => import('./pages/Home.vue'))
```

#### Модалки і складні віджети

Таби, таблиці, графіки, редактори коду.

#### Адмін-панелі

Величезні компоненти можна підвантажувати частинами.

#### Роутер (Vue Router)

```javascript
{
  path: '/dashboard',
  component: () => import('./views/Dashboard.vue')
}
```

---

## Підсумок (шпаргалка)

**Асинхронний компонент - це компонент, який завантажується динамічно за потреби.**

Він потрібен для:

- зменшення розміру бандла
- пришвидшення завантаження застосунку
- оптимізації важких компонентів
- lazy-loading сторінок

Створюється через:

```javascript
defineAsyncComponent(() => import('./MyComponent.vue'))
```

або через `<Suspense>` для завантаження з fallback.

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

Для рев’юера

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

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