Lazy loading은 모든 것을 초기 다운로드에 묶는 대신, 사용자가 기능으로 이동할 때까지 그 기능의 코드 다운로드를 미룹니다. 이는 초기 번들을 줄이고 앱의 첫 로드 속도를 높입니다.
standalone 컴포넌트 lazy-load (최신)
ts
: = [
{ : , : },
{
: ,
:
().( m.),
},
];
Lazy loading은 모든 것을 초기 다운로드에 묶는 대신, 사용자가 기능으로 이동할 때까지 그 기능의 코드 다운로드를 미룹니다. 이는 초기 번들을 줄이고 앱의 첫 로드 속도를 높입니다.
: = [
{ : , : },
{
: ,
:
().( m.),
},
];
동적 import()는 빌드 도구에게 AdminComponent를 자체 청크로 분할하여, 사용자가 /admin을 방문할 때만 다운로드하도록 지시합니다.
export const routes: Routes = [
{
path: "dashboard",
loadChildren: () => // 기능 전체의 라우트를 로드
import("./dashboard/dashboard.routes").then(m => m.DASHBOARD_ROUTES),
},
];
loadChildren은 기능 영역 전체(모든 라우트/컴포넌트)를 하나의 청크로 lazy-load합니다. 대규모 앱을 기능별로 분할하는 표준 방법입니다.
{
path: "shop",
loadChildren: () => import("./shop/shop.module").then(m => m.ShopModule),
}
lazy loading 없이: main.js = Home + Admin + Dashboard + Reports + ... (크고 느림)
lazy loading과 함께: main.js = Home만; 다른 기능은 내비게이션 시 로드
사용자는 실제로 방문하는 것만 다운로드합니다. 많은 기능 영역을 가진 대규모 엔터프라이즈 앱에서 결정적이며, 주어진 사용자는 그중 대부분을 결코 열지 않습니다.
provideRouter(routes, withPreloading(PreloadAllModules));
// 초기 로드 후 백그라운드에서 lazy 청크를 로드하여 내비게이션을 즉각적으로
사전 로딩은 앱이 로드된 후 백그라운드에서 lazy 청크를 가져오므로, 초기 번들은 작게 유지되면서 동시에 이후 내비게이션이 즉각적으로 느껴집니다. 커스텀 전략(예: 다음에 올 가능성이 높은 라우트만 사전 로드)도 작성할 수 있습니다.
Lazy loading은 앱이 커짐에 따라 Angular의 초기 번들을 작게 유지하는 주요 기법입니다. Angular가 대상으로 하는 대규모 다중 기능 엔터프라이즈 앱에 필수적입니다.
라우트/기능별 분할(loadComponent/loadChildren)은 더 빠른 첫 로드를 의미하며, 사전 로딩 전략과 결합하면 빠른 시작과 민첩한 내비게이션을 모두 제공합니다.
이는 상당한 규모의 모든 Angular 애플리케이션에서 표준적이고 영향력이 큰 성능 관행입니다.