[angular] 레이지 로딩 구성

26 Dec 2023

angular

Angular 프레임워크를 사용하면 애플리케이션의 초기 로드 시간을 단축하고 성능을 최적화하기 위해 레이지 로딩(lazy loading)을 구성할 수 있습니다. 레이지 로딩은 필요한 모듈이나 컴포넌트를 처음 호출할 때까지 로드하지 않도록 하고, 필요한 경우에 동적으로 로드합니다.

이를 위해서는 먼저 레이지로드할 컴포넌트를 가진 모듈을 생성해야 합니다. 그런 다음 해당 모듈을 라우팅 설정에 추가하고, 동적으로 로드될 때 사용될 URL을 지정해야 합니다.

레이지로드할 모듈 생성하기

먼저, 레이지 로딩할 모듈을 생성합니다. 이를 위해 레이지 로딩할 컴포넌트를 가진 새로운 Angular 모듈을 만들어야 합니다. 이때 모듈 파일 이름은 “.module.ts”로 끝나야 합니다.

// lazy-loaded.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { LazyLoadedComponent } from './lazy-loaded.component';

@NgModule({
  declarations: [LazyLoadedComponent],
  imports: [
    RouterModule.forChild([
      { path: '', component: LazyLoadedComponent }
    ])
  ]
})
export class LazyLoadedModule {}

라우팅 설정에 레이지로드 모듈 추가하기

다음으로, 레이지로드할 모듈을 라우팅 설정에 추가해야 합니다. 이를 위해 라우팅 모듈 파일에 해당 모듈의 URL을 지정해야 합니다.

// app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 일반 모듈
  { path: 'home', component: HomeComponent },
  // 레이지로드 모듈
  { path: 'lazy', loadChildren: () => import('./lazy-loaded/lazy-loaded.module').then(m => m.LazyLoadedModule) }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}

마무리

이제 레이지 로딩이 구성된 Angular 애플리케이션은 불필요한 리소스를 초기에 로드하지 않고, 필요할 때 동적으로 로드하여 애플리케이션의 초기 로드 시간을 최적화할 수 있습니다.

레이지 로딩을 사용하면 사용자 경험을 향상시키고, 성능을 향상시킬 수 있기 때문에 Angular 애플리케이션을 개발할 때 고려해보면 좋습니다.

참고 자료

Angular 공식 문서 - 레이지 로딩