angular2如何按需加載？

angular2用webpack打包每次都只打包成單個mian文件，很大，例如頁面中的關於我們，聯系我們這樣的頁面，用戶可能幾乎不會打開，但是我們還是每次都要讓用戶加載，體驗很不好，

這樣就需要按需加載，當不長訪問的頁面，我們就單獨打包成一個頁面，當客戶訪問時，再去加載JS文件。

那么angular2如何進行按需加載呢？

我們使用webpack-toolkit，可以直接在git上看教程https://github.com/AngularClass/webpack-toolkit

angular2自己也支持異步加載，可以查看AsyncRoute的使用，github上查找會有很多使用例子 

我寫了個小demo，可以在dev分支中查看相關內容，https://github.com/lyt308012546/ng2-webpack-demo/tree/dev

 

// Install
npm install @angularclass/webpack-toolkit --save-dev


// app/about/about.ts

@Component({
  selector: 'about',
  template: '<h1>About</h1>'
})
export class About {}

// app/app.routes.ts

export const routes = [
  { path: '', component: Home },
  { path: 'about', component: 'About' }
];

// main.browser.ts

import {routes} from './app/app.routes';
import { provideWebpack } from '@angularclass/webpack-toolkit';
bootstrap(App, [
  provideRouter(routes),
  provideWebpack({
    'About': require('es6-promise!./app/about')
  })

]);

 

// 以下是采用AsyncRoute進行異步加載

import { Component } from '@angular/core';
import { RouteConfig, RouterOutlet ,AsyncRoute } from '@angular/router-deprecated';
import { Router } from '@angular/router-deprecated';

import { SubRouteComponent }   from './subroute';

@Component({
    template:  `
    <h2>RouteConfig Demo</h2>
    <button (click)="gotoDetail()">跳轉</button>
    <router-outlet></router-outlet>
  `,
    directives: [RouterOutlet],
})
@RouteConfig([
    {path: '/',    name: 'SubRouteComponent',   component: SubRouteComponent, useAsDefault: true},
    // 異步按需加載
    new AsyncRoute({ path: '/detail', loader: () => require('es6-promise!./routedetail')('RouteDetailComponent'), name: 'RouteDetailComponent' }),
])
export class RouteDemo {

    constructor(
        private router: Router) {}

    gotoDetail(){
        this.router.navigate(['RouteDetailComponent']);
    }
}