angular2自帶了lazyload，就是路由的loadChild，要優化ng2項目必不可少。代碼已更新到ng-demo ->https://github.com/chenby/ng2-demo
先看一下效果（我隨便寫的ng2的demo）--這是主頁————
可以看到下面，有關4.4M，沒有圖片被加載。（刷新要強制刷新，避免瀏覽器緩存）；
打開／h路由，然后強制刷新----
有圖片請求，資源成了4.9M。
打開我們的app.module.ts
寫好主模塊的路由，我這里，比如這樣：
主要就是一個loadChildren屬性，正常的路由是下面那個／a，是component屬性，在加載的時候就直接加載了這個component。loadChildren路由就是要寫明要懶加載的路徑是什么。
#前面是該模塊的地址，#后面是該模塊的導出--子模塊。文件目錄如下--
要懶加載的lazy模塊就在lazy文件夾里。在主模塊里面，我們要做的就這么多。注意，不要在主模塊里引入要懶加載的文件，否則會讓懶加載沒有意義。
然后在lazy文件夾里寫lazy.module.ts，lazy模塊，lazy.components.ts，lazy模塊的視圖組件。這個視圖組件就是被懶加載的內容。
我用的angular-cli，命令運行-
ng g module lazy
生成lazy模塊。
lazy.components.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'lazy',
template:'<h1>lazy</h1> <img src="http://img.zcool.cn/community/01594358b4cf8aa801219c77ef641f.jpg">'
})
export class lazyComponent implements OnInit {
constructor() {
}
ngOnInit() {
}
}
網上隨便找了個圖片來測試模塊是否被懶加載了，這個視圖就是一個h1的標題和一個還不小的圖片。
主要在lazy.module.ts
import { NgModule } from '@angular/core';
import { lazyComponent } from './lazy.components';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', component: lazyComponent }
];
@NgModule({
imports: [
RouterModule.forChild(routes)
],
declarations: [lazyComponent]
})
export class LazyModule { }
我們需要做的就是1，引入視圖模塊。2，定義路由。3，定義子模塊
主要就是這個路由，定義的path:''就是／路由。后面注意定義路由要用forChild。
然后就完成了懶加載。～
另外說一句，子模塊的路由是基於主模塊的路由，如果剛剛寫的是 path:"abc"，那么訪問/h/abc才有視圖展示，否則是空白。