Skip to main content

Що таке асинхронний компонент?

VueJunior~1 хв читання
Запропонувати правку

Асинхронний компонент - це компонент, який завантажується не одразу, а за потреби, коли він дійсно потрібен. Тобто 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 />

Асинхронні компоненти +

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.

Коротка відповідь

Для співбесіди
Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

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