Kako asinkroni komponente omogućavaju lijenije učitavanje?

Question

Accepted Answer

**Asinkroni komponente** vam omogućavaju da učitate kod komponente **samo kada je to zaista potrebno**, dijeleći ga u odvojen paket (chunk) koji se dohvaća po potrebi. To smanjuje početni JavaScript koji korisnik preuzima.

## Zašto je to važno

Difiniranje 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čki `import()` govori bundleru (Vite/webpack) da podijeli `HeavyChart.vue` u svoju datoteku, učitanu lijenjo prvi put kada se komponenta koristi — ne kao dio glavnog paketa.

Zašto je to važno za performanse

```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, rijetko korištene komponente (bogati tekstualni editori, grafikoni, modalni prozori, administratorske ploče) ne trebaju biti u početnom preuzimanju. Lijenije učitavanje poboljšava vrijeme početnog učitavanja i Core Web Vitals.

Rukovanjem stanjem učitavanja i greške

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

Ovaj napredni oblik omogućava vam da pokažete spinner tijekom preuzimanja i alternativu pri neuspjehu — važno jer lijenije učitavanje uvodi (obično kratak) mrežni odgodu.

Česta kombinacija: dioba koda na razini smjerovodstva

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

Lijenije učitavanje komponenti smjerovodstva je najčešće i najefikasnije — kod svake stranice učitava se samo kada korisnik prođe na nju.

Zašto je to važno

Asinkroni komponente su Vueov mehanizam za **dijelu koda** — ključna tehnika za održavanje malih početnih paketa kako aplikacija raste.

Učitavanjem teških ili specifičnih komponenti smjerovodstva po potrebi (s opcionalom UI-om za učitavanje/grešku), smanjujete JavaScript koji korisnici preuzimaju na početku, ubrzavajući prvo učitavanje.

To je standardna, visoko učinkovita optimizacija performansi, posebno ako se primijeni na smjerovođenje.