https://medium.com/@daviddentoom/angular-2-lazy-loading-with-webpack-d25fe71c29c1#.ik88lsre3
Home과 About페이지를 갖는 앱이 있다고 하자 대부분의 유저는 About페이지를 거의 열어보지 않을것이다. 자 이게 lazy loading이 필요한 이유이다. About페이지는 미리 로딩할 필요가 없는 것이다.
프로젝트 설정
/app
app.component.ts
app.component.html
app.module.ts
app.routing.ts
/home
home.component.ts
home.component.html
home.module.ts
home.routing.ts
/+about --> Lazy loaded module
about.component.ts
about.component.html
about.module.ts
about.routing.ts
1. 로더 설치
angular2-router-loader를 사용해야 한다. 아래 명령으로 설치한다.
npm install angular2-router-loader--save-dev
이번엔 webpack 설정파일에 로더를 추가한다.
webpack.config.js
loaders: [
{
test: /\.ts$/,
loaders: [
‘awesome-typescript-loader’,
‘angular2-template-loader’,
‘angular2-router-loader’]
},
...
]
2. 상위 콤포넌트에 라우팅설정을 추가한다.
보통 라우팅 설정을 자기자신의 모듈내에서 정의한다. lazy loading되는 모듈은 상위콤포넌트 즉 호출하는 모듈에서 설정해주어야 한다.
"about" 라우트하나를 설정하고 angular에게 "about"라우트로 페이지를 로드할 수 있도록 알려준다. #AboutModule은 모듈명으로 참조되고 +를 앞에 붙이는 것은 lazy load될거라는 규약이다.
3. Lazy Module 작성
lazy module은 none lazy module과 거의 동일하게 동작한다. 한가지 큰 차이점이 있는데 상위모듈에서 about(/about)경로를 선언했기 때문에 경로를 다시 정의할 필요가 없다. 우리가 해야 하는것은 로드되어야 할 디폴트 콤포넌트를 설정해주는 것이다.
./+about/about.routing.ts
const routes: Routes = [
{ path: '', component: AboutComponent },
];
됐다.
앱을 실행하고 about페이지로 이동하면 새로운 chunk가 로드되는것을 볼수 있을 것이다.
