Jak asynchronní komponenty umožňují líné načítání?

Question

Accepted Answer

**Asynchronní komponenty** vám umožňují načíst kód komponenty **pouze když je skutečně potřebný**, rozdělením do samostatného bundlu (chunk), který se načte na vyžádání. Tím se snižuje počáteční JavaScript, který si uživatel stáhne.

## Definování asynchronní komponenty

```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
);
```

Dynamický `import()` říká bundleru (Vite/webpack), aby rozdělil `HeavyChart.vue` do vlastního souboru, který se líně načte při prvním použití komponenty — nikoli jako součást hlavního bundlu.

## Proč je to důležité pro výkon

```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
```

Velké, zřídka používané komponenty (editory s bohatým textem, grafy, modální okna, panely pro správu) nemusí být v počátečním stahování. Jejich líné načítání zlepšuje dobu počátečního načítání a Core Web Vitals.

## Zpracování stavů načítání a chyb

```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
});
```

Tato pokročilá forma vám umožňuje zobrazit spinner během načítání a záložní řešení při selhání — důležité, protože líné načítání zavádí (obvykle krátké) zpoždění sítě.

## Běžné spárování: rozdělení kódu na úrovni tras

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

Líné načítání komponent tras je nejčastější a nejúčinnější použití — kód každé stránky se načte pouze když se uživatel na ni přesune.

## Proč je to důležité

Asynchronní komponenty jsou mechanismem Vue pro **dělení kódu** — klíčová technika pro zachování malých počátečních bundlů s rostoucí aplikací.

Líným načítáním těžkých nebo trasu specifických komponent na vyžádání (s volitelným uživatelským rozhraním pro načítání/chyby) snižujete JavaScript, který si uživatelé stáhnou na začátku, čímž zrychlíte první načítání.

Jde o standardní optimalizaci výkonu s vysokým dopadem, obzvlášť když se aplikuje na trasy.