Что такое асинхронные компоненты?

Question

Accepted Answer

## Разберёмся
**Async component** подгружается лениво (обычно через dynamic `import()`), а не попадает в initial bundle целиком. Это основной приём code splitting UI во Vue.

## Vue 3 API
```js
import { defineAsyncComponent } from 'vue'

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

const Chart = defineAsyncComponent({
  loader: () => import('./Chart.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorView,
  delay: 200,
  timeout: 10000,
})
```

В шаблоне используете как обычный компонент. Вместе с `Suspense` можно единообразно показать fallback; без Suspense — поля `loadingComponent` / `errorComponent`.

В Vue Router тот же приём на уровне страниц:

```js
{ path: '/admin', component: () => import('./views/Admin.vue') }
```

## Практика
Режьте по маршрутам и тяжёлым виджетам (редакторы, графики, админка). Не дробите каждый мелкий файл: оверхед HTTP/chunk'ов съест выигрыш. Следите за loading UX, чтобы не мигал пустой экран.

## Итог
Async-компонент = отложенная загрузка UI. `defineAsyncComponent` + dynamic import — стандарт Vue 3 для уменьшения initial JS.