Angular---模块懒加载

随着项目的增长，我们的应用尺寸也随之增长。在某一个时间点，我们有可能达到顶点，应用将会需要过多的时间来加载。

为解决这个问题，我们可以使用异步路由（也就是模块懒加载）技术，获得在请求时才惰性加载特性模块的能力。

模块懒加载有多个优点：

• 你可以只在用户请求时才加载某些特性区。
• 对于那些只访问应用程序某些区域的用户，这样能加快加载速度。
• 你可以持续扩充惰性加载特性区的功能，而不用增加初始加载的包体积。

举例来说，我们有一个user模块，我们要将它变为懒加载的模块，可以这样来实现：

• 在app-routing.module.ts中引入user模块：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  pathMatch: 'full'
}, {
  path: 'user',
  loadChildren: './user/user.module#UserModule'
}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我们使用loadChildren属性来设置user模块的地址。 该地址是use模块的文件路径（相对于app目录的），加上一个#分隔符，再加上导出模块的类名UserModule。

• 修改user模块中的user-routing.module.ts文件，将path属性的值设置为空：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { OccupySeatComponent } from './occupy-seat/occupy-seat.component';
import { MyreservationComponent } from './myreservation/myreservation.component';

const routes: Routes = [{
  path: '',
  component: HomeComponent,
  children: [{
    path: 'reservation',
    component: OccupySeatComponent
  }, {
    path: 'myReservation',
    component: MyreservationComponent
  }]
}];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class UserRoutingModule { }

这样User模块就是一个懒加载的模块了。

官方还给了一个查看是否懒加载的步骤：就是打开network看你跳页的时候是否加载了chunk文件。