Kako asinkroni komponente omogočajo lenovo nalaganje?

Question

Accepted Answer

**Asinkroni komponente** vam omogočajo, da naložite kodo komponente **le takrat, ko je dejansko potrebna**, pri čemer jo razdelite v ločen paket (chunk), ki se pridobi na zahtevo. To zmanjša začetni JavaScript, ki ga uporabnik prenese.

## Opredelitev asinkrone komponente

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

Dinamični `import()` pove bravarju (Vite/webpack), da mora `HeavyChart.vue` razdeliti v svojo datoteko, naloženo lenovo prvič, ko se komponenta uporabi — ne kot del glavnega paketa.

## Zakaj je to pomembno za zmogljivost

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

Velike, redko uporabljane komponente (urejevalniki bogatega besedila, grafi, modalni okni, panels za administratorje) ne morajo biti v začetnem prenosu. Lenovo nalaganje vam izboljša čas začetnega nalaganja in Core Web Vitals.

## Obravnavanje stanja nalaganja in napak

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

Ta naprednejša oblika vam omogoča, da prikažete vrtavko med pridobivanjem in nadomestilo pri neuspehu — to je pomembno, ker lenovo nalaganje uvede (ponavadi kratek) zamik omrežja.

## Pogosta kombinacija: razdelitev kode na ravni маршрута

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

Lenovo nalaganje komponent маршruta je najbolj pogost in učinkovit primer — koda vsake strani se naloži le, ko se uporabnik nanjo premakne.

## Zakaj je to pomembno

Asinkroni komponente so mehanizem Vue za **razdelitev kode** — ključno tehniko za ohranitev majhnih začetnih paketov, ko aplikacija raste.

Z lenoval nalaganjem težkih ali маршрuta-specifičnih komponent na zahtevo (z izbirnimi vmesniki za nalaganje/napako) zmanjšate JavaScript, ki ga uporabniki prenesejo na začetku, kar pospešuje prvo nalaganje.

To je standardna, visoko učinkovita optimizacija zmogljivosti, zlasti kadar se uporabi za маршrute.