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。

惰性載入的一些問題可以在模組問題裡找到。