Angular Lazy-loading-ngmodules 사용해보기

Lazy-loading-ngmodules를 사용하는 이유

SPA(Single Page Application)의 단점인 초기 구동 속도를 Angular로 피해갈 수는 없다. 프로젝트가 커지면 커질 수록 더 초기 구동 속도가 느려질 것이다. 그래서 이번 시간에는 초기 구동 시 전체 모듈을 불러오지 않고 관련한 모듈 페이지 로딩 시 불러올 수 있게 구글에서 만들어 놓은 Lazy-loading-ngmodules에 대해 알아보자.

Lazy-loading-ngmodules를 먼저 알기 전 Angular route 기능에 대해 이해하고 들어갔으면 좋겠다.

자 그럼 이제 시작해보자.

1. app-routing (root)를 위한 app-routing.module.ts 를 만들어 보자

만약 새로운 프로젝트를 시작한다면 아래의 명령어를 치면 module을 자동적으로 생성해준다.

ng new (프로젝트 이름) --routing

기존에 프로젝트에 적용하려고 한다면 app-routing.module.ts를 만들고 그 안에 아래의 내용들을 집어 넣는다.

import { NgModule } from '@angular/core';

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

const routes: Routes = [];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

CLI을 이용하면 자동적으로 AppModule에 import 되지만 직접 생성하였기 때문에 AppRountingModule을 app.module.ts에 import 해준다.

2. 이제 서브 라우팅을 생성하기 위해 새로운 Component를 생성한다.

ng g module (sub module 이름) --routing

위의 CLI 명령어를 치면 아래와 같은 폴더 구조로 됩니다. (sub module 이름을 lazy로 하였습니다.)

3. component도 새롭게 추가합니다.

ng g c lazy/lazy-list

위의 CLI 명령어를 치면 lazy라는 폴더에 lazyListComponent가 생성되었고 lazy.module.ts 안에 자동적으로 선언 된 것을 확인할 수 있다.

---

자 이제 준비는 완료되었습니다.

이제 직접 테스트를 해봅시다.

app.component.html에 아래와 같이 내용을 집어 넣습니다.

<h1>

{{title}}

</h1>

<button routerLink="/lazy">Lazy</button>

<button routerLink="">Home</button>

<router-outlet></router-outlet>

지금 현재 로컬 서버로 돌리면 lazy라는 버튼을 클릭 시 페이지가 이동을 안합니다. 왜냐하면 app.routing.module안에 lazy라는 모듈을 포함을 안 시켰기 때문이죠. 그러면 이제 Route 세팅 해봅시다.

app-routing.module.ts에 lazy.module을 추가합니다.

import { NgModule } from '@angular/core';

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

const routes: Routes = [

{

path: 'lazy',

loadChildren: './lazy/lazy.module#LazyModule'

},

{

path: '',

redirectTo: '',

pathMatch: 'full'

}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

그리고 lazy.module에도 마찬가지로 Route 설정을 합니다.

import { NgModule } from '@angular/core';

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

import { LazyListComponent } from './lazy-list/lazy-list.component';

const routes: Routes = [

{

path: '',

component: LazyListComponent

}

];

@NgModule({

imports: [RouterModule.forChild(routes)],

exports: [RouterModule]

})

export class LazyRoutingModule { }

이제 모든 작업은 완료되었다. 지금까지 route가 연결되어 있는 것을 정리하면 아래와 같다.

어플리케이션 실행 시 Route에서는 lazy-routing.module를 불러오지 않고 있다가 Lazy-routing과 관련된 Route가 호출되면 그때 LazyModule이 실행되고 실행됨과 동시에 LazyModule 안에 Lazy-routing.module를 불러온다.

Lazy-loading-ngmodules은 큰 프로젝트에서 매우 유용하게 사용될 수 있다. 작은 프로젝트에서는 크게 보이지는 않겠지만 프로젝트가 규모가 크면 그 규모에 맞게 페이지들도 많아 질테고 당연히 이 모든 것들을 불러오려면 어플리케이션 초기 로드가 커지면 커질 수록 매우 느려질 것이다. 

감사합니다.

오늘도 해피 코딩하세요 !