HTML52017. 2. 16. 14:47


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되는 모듈은 상위콤포넌트 즉 호출하는 모듈에서 설정해주어야 한다.


app.routing.ts

const routes: Routes = [
 { path: '', redirectTo: '/home', pathMatch: 'full',
 { path: 'about', loadChildren: './+about/about.module#AboutModule' }
];


"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가 로드되는것을 볼수 있을 것이다.



The source code can be found here

Posted by 삼스