Angular - 預加載 Angular 模塊

 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 { }

 

此時，能夠看到，模塊直接被預加載了。即便您點擊連接，也不會再有新的請求發生。

其它資源：

• Preloading Modules - Angular Router

• 使用路由延遲加載 Angular 模塊