Async component cho phép lazy loading như thế nào?

Question

Accepted Answer

**Async component** cho phép bạn tải code của một component **chỉ khi nó thực sự cần đến**, tách nó thành một bundle (chunk) riêng được fetch theo nhu cầu. Điều này giảm lượng JavaScript ban đầu mà người dùng tải về.

## Định nghĩa một async component

```js
import { defineAsyncComponent } from "vue";

// code của component chỉ được tải về khi nó render lần đầu
const HeavyChart = defineAsyncComponent(() =>
  import("./HeavyChart.vue")   // dynamic import → chunk riêng
);
```

`import()` động báo cho bundler (Vite/webpack) tách `HeavyChart.vue` thành file riêng của nó, được tải lazy lần đầu component được dùng — không phải là một phần của bundle chính.

## Tại sao điều này quan trọng cho hiệu năng

```text
Không lazy loading: main.js = app + HeavyChart + Editor + Modal + ... (khổng lồ, tải lần đầu chậm)
Có lazy loading:    main.js = chỉ app; HeavyChart.js tải khi bạn mở chart
```

Các component lớn, ít dùng (rich-text editor, chart, modal, admin panel) không cần có trong lần tải ban đầu. Lazy-load chúng cải thiện thời gian tải ban đầu và Core Web Vitals.

## Xử lý trạng thái loading và lỗi

```js
const HeavyChart = defineAsyncComponent({
  loader: () => import("./HeavyChart.vue"),
  loadingComponent: LoadingSpinner,  // hiển thị trong khi chunk đang tải
  errorComponent: ErrorDisplay,       // hiển thị nếu tải thất bại
  delay: 200,                         // đợi 200ms trước khi hiện spinner
  timeout: 5000,                      // bỏ cuộc sau 5s
});
```

Dạng nâng cao này cho phép bạn hiển thị spinner trong khi fetch và một fallback khi thất bại — quan trọng vì lazy loading đưa vào một độ trễ mạng (thường ngắn).

## Cặp đôi phổ biến: code splitting cấp route

```js
// Vue Router — mỗi route tải component trang của nó theo nhu cầu
const routes = [
  { path: "/dashboard", component: () => import("./Dashboard.vue") },
];
```

Lazy-load component của route là cách dùng phổ biến và tác động lớn nhất — code của mỗi trang chỉ tải khi người dùng điều hướng đến nó.

## Tại sao điều này quan trọng

Async component là cơ chế **code splitting** của Vue — kỹ thuật then chốt để giữ bundle ban đầu nhỏ khi app phát triển.

Bằng cách tải các component nặng hoặc đặc thù theo route theo nhu cầu (với UI loading/lỗi tùy chọn), bạn cắt giảm lượng JavaScript người dùng tải ngay từ đầu, tăng tốc lần tải đầu tiên.

Đây là một tối ưu hiệu năng tiêu chuẩn, tác động cao, đặc biệt khi áp dụng cho các route.