> Какие способы асинхронной подгрузки компонентов есть во Vue (Vue.js)

Во Vue 3 асинхронная подгрузка компонентов реализуется через динамический импорт с помощью defineAsyncComponent. Это позволяет загружать компонент только когда он действительно нужен, уменьшая размер основного бандла.

Основной способ:

JAVASCRIPT
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() => 
  import('./components/HeavyComponent.vue')
)

С опциями (загрузка, ошибка, задержка):

JAVASCRIPT
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./components/HeavyComponent.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorComponent,
  delay: 200,      // задержка перед показом loadingComponent
  timeout: 5000    // таймаут для ошибки
})

Во Vue Router (ленивая загрузка маршрутов):

JAVASCRIPT
const routes = [
  {
    path: '/dashboard',
    component: () => import('./views/Dashboard.vue')
  }
]

В Nuxt 3 (автоматическая подгрузка):

JAVASCRIPT
// Компонент в папке components/ автоматически становится lazy при использовании:
<LazyHeavyComponent />

Важно: Асинхронные компоненты поддерживают Suspense (Vue 3), что позволяет обрабатывать состояние загрузки на уровне родителя.