Bạn lazy-load các route/feature trong Angular như thế nào?

Question

Accepted Answer

**Lazy loading** trì hoãn việc tải xuống code của một feature cho tới khi người dùng điều hướng tới nó, thay vì gói tất cả vào lần tải xuống ban đầu. Điều này thu nhỏ bundle ban đầu và tăng tốc lần tải đầu của ứng dụng.

## Lazy-load một standalone component (hiện đại)

```ts
export const routes: Routes = [
  { path: "home", component: HomeComponent },         // eager (trong bundle chính)
  {
    path: "admin",
    loadComponent: () =>                               // lazy — chunk riêng
      import("./admin/admin.component").then(m => m.AdminComponent),
  },
];
```

Lệnh `import()` động báo cho công cụ build tách `AdminComponent` thành chunk riêng của nó, chỉ tải xuống khi người dùng truy cập `/admin`.

## Lazy-load một nhóm route

```ts
export const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>                                // tải các route của cả một feature
      import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
  },
];
```

`loadChildren` lazy-load cả một khu vực feature (tất cả route/component của nó) như một chunk — cách tiêu chuẩn để tách một ứng dụng lớn theo feature.

## Dạng dựa trên NgModule (các codebase cũ hơn)

```ts
{
  path: "shop",
  loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
```

## Vì sao nó cải thiện hiệu năng

```text
Không lazy loading: main.js = Home + Admin + Dashboard + Reports + ... (lớn, chậm)
Với lazy loading:   main.js = chỉ Home; các feature khác tải khi điều hướng
```

Người dùng chỉ tải xuống những gì họ thực sự truy cập — tối quan trọng cho các ứng dụng doanh nghiệp lớn với nhiều khu vực feature, mà phần lớn người dùng không bao giờ mở.

## Chiến lược preloading (kết hợp tốt nhất cả hai)

```ts
provideRouter(routes, withPreloading(PreloadAllModules));
// tải các lazy chunk trong nền SAU lần tải ban đầu, để điều hướng được tức thì
```

Preloading lấy các lazy chunk trong nền sau khi ứng dụng tải xong, để bundle ban đầu vẫn nhỏ *và* điều hướng sau đó cảm giác tức thì. Bạn cũng có thể viết các chiến lược tùy chỉnh (ví dụ chỉ preload các route có khả năng được vào tiếp theo).

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

Lazy loading là kỹ thuật chính để giữ bundle ban đầu của Angular nhỏ khi ứng dụng lớn lên — thiết yếu cho các ứng dụng doanh nghiệp lớn, nhiều feature mà Angular nhắm tới.

Tách theo route/feature (`loadComponent`/`loadChildren`) nghĩa là lần tải đầu nhanh hơn, và kết hợp với một chiến lược preloading cho cả khởi động nhanh lẫn điều hướng nhanh nhạy.

Đây là một thực hành hiệu năng tiêu chuẩn, tác động cao trong bất kỳ ứng dụng Angular cỡ lớn nào.