Bagaimana komponen async memungkinkan pemuatan lambat?

Question

Accepted Answer

**Komponen async** memungkinkan Anda memuat kode komponen **hanya ketika benar-benar diperlukan**, membaginya menjadi bundel terpisah (chunk) yang diambil sesuai permintaan. Ini mengurangi JavaScript awal yang diunduh pengguna.

## Mengapa ini penting

Mendefinisikan komponen async

```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()` memberi tahu bundler (Vite/webpack) untuk membagi `HeavyChart.vue` ke dalam file tersendiri, dimuat dengan malas saat komponen pertama kali digunakan — bukan sebagai bagian dari bundel utama.

Mengapa ini penting untuk performa

```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 besar dan jarang digunakan (editor teks kaya, bagan, modal, panel admin) tidak perlu ada di unduhan awal. Pemuatan lambat mereka meningkatkan waktu muat awal dan Core Web Vitals.

Menangani status pemuatan dan kesalahan

```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 memungkinkan Anda menampilkan spinner selama pengambilan dan fallback saat gagal — penting karena pemuatan lambat memperkenalkan penundaan jaringan (biasanya singkat).

Penggabungan umum: pemisahan kode tingkat rute

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

Pemuatan lambat komponen rute adalah penggunaan paling umum dan berdampak — kode setiap halaman hanya dimuat ketika pengguna menavigasi ke sana.

Mengapa ini penting

Komponen async adalah mekanisme Vue untuk **pemisahan kode** — teknik kunci untuk menjaga bundel awal tetap kecil seiring pertumbuhan aplikasi.

Dengan memuat komponen berat atau spesifik rute sesuai permintaan (dengan UI pemuatan/kesalahan opsional), Anda mengurangi JavaScript yang diunduh pengguna di awal, mempercepat pemuatan pertama.

Ini adalah optimisasi performa standar dan berdampak tinggi, terutama ketika diterapkan ke rute.