Зачем нужен defineAsyncComponent?

`defineAsyncComponent` (Vue) нужен для ленивой загрузки компонентов — компонент загружается только когда действительно рендерится, что уменьшает начальный бандл.

Что делает

Определяет компонент, который загружается асинхронно (по требованию), а не сразу при загрузке приложения:

import { defineAsyncComponent } from 'vue';

const AsyncModal = defineAsyncComponent(() =>
  import('./HeavyModal.vue') // загрузится, только когда компонент понадобится
);

Зачем нужен

• Уменьшение начального бандла — код компонента в отдельном чанке, грузится по требованию.
• Быстрый первый показ — не грузим редкие/тяжёлые компоненты сразу.
• Code splitting — бандлер создаёт отдельный чанк для async-компонента.

Расширенные опции

const AsyncComp = defineAsyncComponent({
  loader: () => import('./Comp.vue'),
  loadingComponent: Spinner,   // пока грузится
  errorComponent: ErrorView,   // при ошибке загрузки
  delay: 200,                  // задержка перед показом loading
  timeout: 5000,               // таймаут загрузки
});

Где применять

• Тяжёлые компоненты (графики, редакторы).
• Редко используемые (модалки, диалоги).
• Компоненты маршрутов (в связке с роутером).

Аналог в React

React.lazy(() => import(...)) + Suspense.

Коротко для собеседования

defineAsyncComponent (Vue) лениво загружает компонент — только когда он рендерится, уменьшая начальный бандл (code splitting). Поддерживает loadingComponent, errorComponent, delay, timeout. Для тяжёлых/редких компонентов (модалки, графики). Аналог React.lazy + Suspense в React.