Как асинхронные компоненты обеспечивают ленивую загрузку?

Question

Accepted Answer

**Асинхронные компоненты** позволяют загружать код компонента **только когда это действительно необходимо**, разделяя его на отдельный пакет (chunk), который загружается по требованию. Это уменьшает объём JavaScript, который пользователь загружает изначально.

## Определение асинхронного компонента

```js
import { defineAsyncComponent } from "vue";

// the component's code is only downloaded when it first renders
const HeavyChart = defineAsyncComponent(() =>
  import("./HeavyChart.vue")   // dynamic import → separate chunk
);
```

Динамический `import()` говорит бандлеру (Vite/webpack) разделить `HeavyChart.vue` в отдельный файл, который загружается лениво при первом использовании компонента — не как часть основного пакета.

## Почему это важно

```text
Without lazy loading: main.js = app + HeavyChart + Editor + Modal + ... (huge, slow first load)
With lazy loading:    main.js = app only; HeavyChart.js loads when you open the chart
```

Большие, редко используемые компоненты (текстовые редакторы, графики, модали, панели администратора) не должны быть в начальной загрузке. Их ленивая загрузка улучшает время начальной загрузки и Core Web Vitals.

## Обработка состояний загрузки и ошибок

```js
const HeavyChart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: LoadingSpinner,  // shown while the chunk downloads
  errorComponent: ErrorDisplay,       // shown if the download fails
  delay: 200,                         // wait 200ms before showing the spinner
  timeout: 5000,                      // give up after 5s
});
```

Эта расширенная форма позволяет показать спиннер во время загрузки и fallback при ошибке — важно, так как ленивая загрузка вводит (обычно короткую) сетевую задержку.

## Типичная комбинация: code splitting на уровне маршрутов

```js
// Vue Router — each route loads its page component on demand
const routes = [
  { path: "/dashboard", component: () => import("./Dashboard.vue") },
];
```

Ленивая загрузка компонентов маршрутов — самое распространённое и эффективное применение — код каждой страницы загружается только при переходе пользователя на эту страницу.

## Почему это важно

Асинхронные компоненты — это механизм Vue для **code splitting** — ключевой техники для сохранения размера начальных пакетов при растущем приложении.

Загружая тяжелые или специфичные для маршрутов компоненты по требованию (с опциональным UI загрузки/ошибок), вы уменьшаете объём JavaScript, загружаемый пользователем изначально, что ускоряет первую загрузку.

Это стандартная и высокоэффективная оптимизация производительности, особенно при применении к маршрутам.