[angular] 모듈 로딩 지연 최적화

26 Dec 2023

angular

Angular 애플리케이션은 모듈이 로드될 때 초기에 많은 리소스를 요구할 수 있습니다. 대형 애플리케이션의 경우 모든 모듈을 한 번에 로드하면 초기 로딩 시간이 길어질 수 있습니다. 이러한 상황에서 모듈 로딩 지연 최적화를 적용하여 초기 로딩 시간을 단축할 수 있습니다.

모듈 로딩 지연 최적화란?

모듈 로딩 지연 최적화는 필요한 시점에 모듈을 로드하는 방식을 말합니다. Angular 애플리케이션에서는 NgModuleFactoryLoader를 사용하여 Lazy Loading으로 모듈을 동적으로 로드할 수 있습니다. 이렇게 하면 초기 로딩 시간이 단축되며, 애플리케이션이 필요로 하는 모듈만 로드되므로 전체 리소스 사용량을 줄일 수 있습니다.

모듈 로딩 지연 최적화 적용하기

Angular에서 모듈 로딩 지연 최적화를 적용하려면 다음과 같은 단계를 따릅니다.

RouterModule에서 Lazy Loading 모듈을 정의합니다.

const routes: Routes = [
  { path: 'lazy', loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) }
];

NgModuleFactoryLoader를 사용하여 Lazy Loading 모듈을 동적으로 로드합니다.

export class MyComponent {
  constructor(private loader: NgModuleFactoryLoader, private injector: Injector) { }
   
  loadLazyModule() {
    this.loader.load('lazy/lazy.module').then(factory => {
      const module = factory.create(this.injector);
      // Lazy Loading 모듈을 사용
    });
  }
}

결론

모듈 로딩 지연 최적화를 통해 Angular 애플리케이션의 초기 로딩 시간을 단축할 수 있습니다. Lazy Loading을 통해 필요한 모듈만 필요한 시점에 로드하여 전체 애플리케이션 성능을 향상시킬 수 있습니다.

이렇듯, Angular에서 모듈 로딩 지연 최적화를 통해 애플리케이션 성능을 향상시킬 수 있습니다.

Angular 공식 문서 - Lazy Loading Modules