Angular - 預加載延遲模塊
在使用路由延遲加載中，我們介紹了如何使用模塊來拆分應用，在訪問到這個模塊的時候， Angular 加載這個模塊。但這需要一點時間。在用戶第一次點擊的時候，會有一點延遲。
我們可以通過預加載路由來修復這個問題。路由可以在用戶與其它部分交互的時候，異步加載延遲的模塊。這可以使用戶在訪問延遲模塊的時候更快地訪問。
本文將在上一個示例的基礎上，增加預加載的功能。
在上一節中，我們的根路由定義在 main.routing.ts，我們在 app.module.ts 中使用了根路由定義。
需要注意的是，Home 組件是提前加載的。我們將在系統啟動之后渲染這個組件。
在 Angular 渲染 Home 組件之后，用戶就可以與應用交互了，我們可以通過簡單的配置在后台預加載其它模塊。
啟用預加載
我們在 forRoot 函數中，提供一個預加載的策略。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { PreloadAllModules } from '@angular/router';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
這個 PreloadAllModules 策略來自 @angular/router，所以我們還需要導入它。
定制預加載策略
router 包中預定義了兩個策略：
- 不預加載 NoPreloading
- 預加載所有模塊 PreloadAllModules
5 秒之后加載模塊
但是，您可以自己定義一個定制的策略。這比您想的要更為簡單。例如，您希望在應用初始化 5 秒之后加載其余的模塊。
您需要實現接口 PreloadingStrategy，我們定義一個 CustomPreloadingStrategy 的自定義策略類。
import { Route } from '@angular/router';
import { PreloadingStrategy } from '@angular/router';
import { Observable } from 'rxjs/Rx';
export class CustomPreloadingStrategy implements PreloadingStrategy {
preload(route: Route, fn: () => Observable<boolean>): Observable<boolean> {
return Observable.of(true).delay(5000).flatMap((_: boolean) => fn());
}
}
然后，修改 app.module.ts 使用這個自定義策略。需要注意的是，您還需要在 prodivers 中添加這個類。以實現依賴注入。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { CustomPreloadingStrategy } from './preload';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes, { preloadingStrategy: CustomPreloadingStrategy })
],
providers: [CustomPreloadingStrategy ],
bootstrap: [AppComponent]
})
export class AppModule { }
你會看到 在 5 秒鍾之后，這個功能模塊被自動加載了。
加載指定模塊
我們還可以在路由中定義附加的參數來指定哪些模塊進行預加載，我們使用路由定義中的 data 來提供這個附加的數據。
import { Routes } from '@angular/router';
// HomeComponent this components will be eager loaded
import { HomeComponent } from './home/home.component';
export const routes: Routes = [
{ path: '', component: HomeComponent, pathMatch: 'full' },
{ path: 'shop', loadChildren: './shop/shop.module#ShopModule', data: {preload: true} },
{ path: '**', component: HomeComponent }
];
然后，我們定義新的加載策略。
import { Observable } from 'rxjs/Rx';
import { PreloadingStrategy, Route } from '@angular/router';
export class PreloadSelectedModules implements PreloadingStrategy {
preload(route: Route, load: Function): Observable<any> {
return route.data && route.data.preload ? load() : Observable.of(null);
}
}
最后，在 app.module.ts 中使用這個策略。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { routes } from './main.routing';
import { RouterModule } from '@angular/router';
import { PreloadSelectedModules } from './preload.module';
@NgModule({
declarations: [
AppComponent,
HomeComponent
],
imports: [
BrowserModule,
RouterModule.forRoot(routes, { preloadingStrategy: PreloadSelectedModules })
],
providers: [PreloadSelectedModules ],
bootstrap: [AppComponent]
})
export class AppModule { }
此時，可以看到，模塊直接被預加載了。即使您點擊鏈接，也不會再有新的請求發生。
