Angular 中使用惰性加载

一些模块使用延迟加载后，只有当用户第一次导航到这个模块时，才会加载一些特性。这对于应用程序的性能和减小初始包的大小有很大的帮助。另外，设置非常简单。

延迟加载的路由需要在根应用程序模块之外，所以需要将惰性加载特性假如特性模块中。

$ ng g module shop
$ ng g c shop/cart
$ ng g c shop/checkout
$ ng g c shop/confirm

在主路由配置中，需要执行以下操作：

import { Routes } from '@angular/router';

// BoutiqueComponent is a normal, eager loaded component
import { BoutiqueComponent } from './boutique/boutique.component';

export const routes: Routes = [
  { path: '', component: BoutiqueComponent, pathMatch: 'full' },
  { path: 'shop', loadChildren: './shop/shop.module#ShopModule' },
  { path: '**', component: BoutiqueComponent }
];

上面使用了loadChildren，首先他通往模块的路径，然后#后面跟的是模块的类名。它指示路由器，模块应该是惰性加载，并告诉它在哪里找到模块。

剩下要做的就是配置特定于功能模块的路由：

import { Routes } from '@angular/router';

import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

export const routes: Routes = [
    { path: '', component: CartComponent },
    { path: 'checkout', component: CheckoutComponent },
    { path: 'confirm', component: ConfirmComponent },
];

最后，在惰性模块中，使用RouterModule中得forChild替换forRoot。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CartComponent } from './cart/cart.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { ConfirmComponent } from './confirm/confirm.component';

import { routes } from './shop.routing';
import { RouterModule } from '@angular/router';


@NgModule({
  imports: [
    RouterModule.forChild(routes)
  ],
  declarations: [CartComponent, CheckoutComponent, ConfirmComponent]
})
export class LegalModule { }

这就是它得全部。现在访问/shop,/shop/checkout这些模块将在第一次加载这些路径时加载。tip:假如不能立即生效，可以重启下sever。

惰性加载的一些问题可以在模块问题里找到。