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

Что проверяют

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

Как отвечать

Основа у всех способов одна: динамический import(), который Vite или webpack выносят в отдельный чанк. Дальше варианты:

• defineAsyncComponent: основной способ для компонентов во Vue 3. Принимает загрузчик или объект с опциями loader, loadingComponent, errorComponent, delay (по умолчанию 200 мс), timeout и onError для повторной попытки;
• ленивые маршруты: во Vue Router component: () => import('./views/About.vue'). Здесь defineAsyncComponent не нужен, роутер сам ждёт функцию, возвращающую промис;
• <Suspense>: ждёт асинхронные компоненты и async setup() и показывает общий fallback. Он всё ещё помечен экспериментальным;
• ленивая гидрация: с Vue 3.5 в опцию hydrate передают hydrateOnVisible(), hydrateOnIdle() или hydrateOnInteraction(), и SSR-компонент оживает только при появлении во вьюпорте или по событию;
• Nuxt: префикс Lazy у автоимпортируемых компонентов, например <LazyComments v-if="open" />.

Покажите логику выбора: лениво грузят тяжёлое и не видное сразу, то есть модалки, редакторы, графики, вкладки и маршруты. Имя чанка в webpack задают комментарием /* webpackChunkName: "chart" */, в Vite группировку настраивают через manualChunks в опциях сборки. Импорт по шаблону пути в Vite делают через import.meta.glob.

Где спотыкаются

Пишут в опции components просто () => import(...), как было во Vue 2. Во Vue 3 обычная функция считается функциональным компонентом, поэтому без defineAsyncComponent это не работает.

Оборачивают маршруты в defineAsyncComponent. Документация Vue Router прямо советует так не делать: ленивый маршрут и асинхронный компонент это разные механизмы.

Делают ленивым всё подряд. Получается водопад из десятков мелких чанков, и экран открывается дольше, чем с одним бандлом. Ещё одна ошибка: нет errorComponent и timeout, и при сбое сети пользователь видит пустое место.