어플리케이션이 커지고 많은 ng모듈들이 생기면 어플리케이션은 모든 모듈들이 로드되어야 구동되기때문에 초기로드시간을 소요하게된다.
이러한 문제를 해결하려면 비동기라우팅을 이용해서 초기에 모두 로드하지 않고 필요할때 로드하는 지연로딩을 사용한다.
지연로딩을 하려면 어플리케이션을 기능별로 모듈화해야 필요할때 모듈화된 모듈을 로드할 수 있다.
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
AdminMoudule,
AppRoutingModule,
],
providers: [],
bootstrap: [AppComponent]
})AppModule파일에서 AdminModule을 imports하기 때문에 어플리케이션이 시작할때 AdminModule을 로딩한다.
지연로딩하려면 로딩방식을 변경해야한다.
AppModule에서 import하지 않고 라우트규칙에 동적로딩을 설정해야 한다.
{
path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
},이제 라우터가 해당 라우트규칙을 적용하는 시점이 되면 동적지연로딩을 하게 된다.
AdminModule이 동적로딩되면 AdminModule의 라우트규칙도 로드된다.
AdminModule이 지연로딩되도록 규칙을 정했으므로 AdminModule파일에 있는 AdminModule이 import되지 않도록 제거해야 한다.
지연로딩은 AdminModule을 동적로딩하여 어플리케이션시작시 로딩하지 않아 초기로딩속도 향상에 도움이 된다.
그러나 로그인되지 않은 사용자가 Admin에 처음 접근하려고할때도 동적로딩이 발생하기때문에 로그인하지 않은 상태라면 지연로딩하지 않는 방식이 좋을 것이다.
이런 경우에 CanLoad가드를 사용하면 사용자가 로그인상태에서 접근했을때만 AdminModule을 지연로딩가능하게 한다.
사전로딩
어플리케이션시작시 로딩되는 모듈들과 지연로딩하도록 설정된 모듈들로 구성하면 초기로딩을 개선하는 효과가 있지만 지연로딩모듈의 크기에따라 지연로딩시 딜레이가 발생할 수 있다.
이러한 지연로딩의 단점을 극복하기 위한 방법으로 사전로딩방식이 도입되었다.
사전로딩은 어플리케이션 시작후 지연로딩되도록 설정되있는 모듈들을 미리로딩하는 것을 의미하며 이렇게 하면 모듈 지연로딩없이 모듈에 접근할 수 있게 된다.
Router의 사전로딩 방식 2가지
- 사전로딩하지 않는다. ( 기본값 )
- 지연로딩모듈들을 모두 사전로딩한다.
- 커스텀사전로딩
지연로딩모듈들을 모두 사전로딩하기
RouterModule.forRoot(
appRoutes,{preloadingStrategy:PreloadAllModules}
)app-routing.module파일에서 라우트규칙을 로드할때 2번째 인자로 사전로딩방식을 위와같이 설정하면 된다.
그러나 CanLoad로 보호되고 있는 모듈은 사전로딩에 해당되지 않는것은 당연하다.
커스텀사전로딩방식
지연로딩과 사전로딩방식은 웬만해서는 문제가 발생하지 않는다. 하지만 네트워크상황이 좋지 않거나 데이터소모를 줄일려고 한다면 모듈마다 적합한 커스텀 사전로딩정책을 사용할 수 있다.
라우트규칙에 data.preload플래그가 true일경우에만 커스텀사전로딩되도록 할 수 있다.
{
path: 'crisis-center',
loadChildren: () => import('./crisis-center/crisis-center.module').then(m => m.CrisisCenterModule),
data: { preload: true }
},SelectivePreloadingStrategyService 서비스함수는 지연로딩되어있는 모듈들을 검사하여 preload가 true인 모듈만 사전로딩한다.
단, 지연로딩모듈중에 canLoad되어있는 모듈은 사전하지 않는다.
