Kepiye async components ngaktifake lazy loading?

Question

Accepted Answer

**Async components** ndadosaken sampeyan bisa ngemot kode component **mung nalika pancene dibutuhi**, mbagi-mbagi dadi bundle kapisah (chunk) sing dijemput nalika diperlokaken. Iki ngurangi JavaScript awal sing diundhuh pangguna.

## Nggawe async component

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

Dynamic `import()` kandel marang bundler (Vite/webpack) supaya mbagi `HeavyChart.vue` dadi file dhewe, dimuat kanthi santai kaping kapisan component kasebut digunakake — bukan minangka bagian saka bundle utama.

## Alasan iki penting kanggo performance

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

Komponen gedhe sing jarang digunakake (rich-text editors, charts, modals, admin panels) ora perlu ana ing undhuhan awal. Lazy-loading jero nambah wektu muat awal lan Core Web Vitals.

## Nangani loading lan error states

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

Wujud lanjut iki ngandal sampeyan bisa nampilake spinner suwene fetch lan fallback nalika gagal — penting amarga lazy loading mula dina (biasane ringkes) penundho jaringan.

## Pasangan umum: route-level code splitting

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

Lazy-loading route components iku paling umum lan ngaruhi — kode halaman saben mung dimuat nalika pengguna mendhuki kono.

## Alasan iku penting

Async components minangka mekanisme Vue kanggo **code splitting** — teknik kunci kanggo njaga bundle awal tetep cilik nalika app berkembang.

Dengan ngemot komponen berat utawa route-specific on demand (kanthi optional loading/error UI), sampeyan motong JavaScript sing pangguna undhuh ngriki, kacepetan muat pertama.

Iku optimization performance standard, ngaruhi tinggi, utamane nalika dilayang menyang routes.