使用延迟加载之后，我们将应用拆分为多个模块，在访问到这个模块的时候， Angular 加载这个模块但这需要一点时间。在用户第一次点击的时候，会有一点延迟。
我们可以通过预加载路由来修复这个问题。路由可以在用户与其它部分交互的时候，异步加载延迟的模块。这可以使用户在访问延迟模块的时候更快地访问。
如何使用预加载呢
启用预加载
我们在 forRoot 函数中，提供一个预加载的策略。
import { BrowserModule } from '@angular/platform-browser';import { NgModule } from '@angular/core';import { AppComponent } from './ponent';import { HomeComponent } from './home/ponent';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，所以我们还需要导入它。
上面的例子是在app.module.ts 文件中
总之是在使用RouterModule.forRoot()时使用预加载策略。
··············································································································
定制预加载策略
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 './ponent';import { HomeComponent } from './home/ponent';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 loadedimport { HomeComponent } from './home/ponent';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 './ponent';import { HomeComponent } from './home/ponent';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 { }
这样就完成了定制。
