Bagaimanakah async component membolehkan lazy loading?

Question

Accepted Answer

**Async component** membolehkan anda memuatkan kod sesuatu komponen **hanya apabila ia benar-benar diperlukan**, dengan memecahkannya kepada bundle (chunk) berasingan yang diambil atas permintaan. Ini mengurangkan JavaScript awal yang dimuat turun oleh pengguna.

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

`import()` dinamik memberitahu bundler (Vite/webpack) untuk memecahkan `HeavyChart.vue` kepada failnya sendiri, dimuatkan secara malas pada kali pertama komponen itu digunakan — bukan sebahagian daripada bundle utama.

## Mengapa ini penting untuk prestasi

```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 yang besar dan jarang digunakan (editor teks kaya, carta, modal, panel admin) tidak perlu berada dalam muat turun awal. Memuatkannya secara malas meningkatkan masa muat awal dan Core Web Vitals.

## Mengendalikan keadaan loading dan error

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

Bentuk lanjutan ini membolehkan anda menunjukkan spinner semasa pengambilan dan fallback apabila gagal — penting kerana lazy loading memperkenalkan kelewatan rangkaian (biasanya ringkas).

## Gandingan biasa: code splitting peringkat route

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

Memuatkan komponen route secara malas ialah penggunaan yang paling biasa dan berkesan — kod setiap halaman dimuatkan hanya apabila pengguna menavigasi kepadanya.

## Mengapa ia penting

Async component ialah mekanisme Vue untuk **code splitting** — teknik utama untuk mengekalkan bundle awal kecil apabila aplikasi berkembang.

Dengan memuatkan komponen yang berat atau khusus-route atas permintaan (dengan UI loading/error pilihan), anda mengurangkan JavaScript yang dimuat turun pengguna pada awalnya, mempercepatkan muat pertama.

Ia merupakan pengoptimuman prestasi standard yang berimpak tinggi, terutamanya apabila digunakan pada route.