Angular에서 라우트/기능을 어떻게 lazy-load 하나요?

Question

Accepted Answer

**Lazy loading**은 모든 것을 초기 다운로드에 묶는 대신, 사용자가 기능으로 이동할 때까지 그 기능의 코드 다운로드를 미룹니다. 이는 초기 번들을 줄이고 앱의 첫 로드 속도를 높입니다.

## standalone 컴포넌트 lazy-load (최신)

```ts
export const routes: Routes = [
  { path: "home", component: HomeComponent },         // eager (메인 번들에 포함)
  {
    path: "admin",
    loadComponent: () =>                               // lazy — 별도 청크
      import("./admin/admin.component").then(m => m.AdminComponent),
  },
];
```

동적 `import()`는 빌드 도구에게 `AdminComponent`를 자체 청크로 분할하여, 사용자가 `/admin`을 방문할 때만 다운로드하도록 지시합니다.

## 라우트 그룹 lazy-load

```ts
export const routes: Routes = [
  {
    path: "dashboard",
    loadChildren: () =>                                // 기능 전체의 라우트를 로드
      import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
  },
];
```

`loadChildren`은 기능 영역 전체(모든 라우트/컴포넌트)를 하나의 청크로 lazy-load합니다. 대규모 앱을 기능별로 분할하는 표준 방법입니다.

## NgModule 기반 형태 (오래된 코드베이스)

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

## 성능을 향상시키는 이유

```text
lazy loading 없이: main.js = Home + Admin + Dashboard + Reports + ... (크고 느림)
lazy loading과 함께: main.js = Home만; 다른 기능은 내비게이션 시 로드
```

사용자는 실제로 방문하는 것만 다운로드합니다. 많은 기능 영역을 가진 대규모 엔터프라이즈 앱에서 결정적이며, 주어진 사용자는 그중 대부분을 결코 열지 않습니다.

## 사전 로딩 전략 (양쪽의 장점)

```ts
provideRouter(routes, withPreloading(PreloadAllModules));
// 초기 로드 후 백그라운드에서 lazy 청크를 로드하여 내비게이션을 즉각적으로
```

사전 로딩은 앱이 로드된 후 백그라운드에서 lazy 청크를 가져오므로, 초기 번들은 작게 유지되면서 *동시에* 이후 내비게이션이 즉각적으로 느껴집니다. 커스텀 전략(예: 다음에 올 가능성이 높은 라우트만 사전 로드)도 작성할 수 있습니다.

## 왜 중요한가

Lazy loading은 앱이 커짐에 따라 Angular의 초기 번들을 작게 유지하는 주요 기법입니다. Angular가 대상으로 하는 대규모 다중 기능 엔터프라이즈 앱에 필수적입니다.

라우트/기능별 분할(`loadComponent`/`loadChildren`)은 더 빠른 첫 로드를 의미하며, 사전 로딩 전략과 결합하면 빠른 시작과 민첩한 내비게이션을 모두 제공합니다.

이는 상당한 규모의 모든 Angular 애플리케이션에서 표준적이고 영향력이 큰 성능 관행입니다.