淺談angular2路由預(yù)加載策略

更新時(shí)間：2017年10月04日 09:14:19 作者：rotating_windmill

這篇文章主要介紹了淺談angular2路由預(yù)加載策略，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

1.問(wèn)題描述

在沒(méi)有使路由懶加載的時(shí)候，第一次使用的時(shí)候加載特別慢，影響用戶體驗(yàn)，angular2可以使用loadChildren進(jìn)行懶加載，第一次使用的時(shí)候只會(huì)加載需要的模塊，其它模塊在真正使用的時(shí)候才會(huì)去加載，這個(gè)時(shí)候打開(kāi)瀏覽器控制臺(tái)查看js加載的時(shí)候，會(huì)發(fā)現(xiàn)你在使用時(shí)候會(huì)去加載對(duì)應(yīng)的js，導(dǎo)致第一次點(diǎn)擊相應(yīng)模塊的功能時(shí)會(huì)卡頓一下，后面在使用就不會(huì)了，這樣還是用戶體驗(yàn)不好，接下來(lái)告訴你如果使用預(yù)加載策略解決這個(gè)問(wèn)題。

2.預(yù)加載策略

RouterModule.forRoot的第二個(gè)添加了一個(gè)配置選項(xiàng)，這人配置選項(xiàng)中就有一個(gè)是preloadingStrategy配置，當(dāng)然它還有其它配置，這里只講preloadingStrategy，這個(gè)配置是一個(gè)預(yù)加載策略配置，我們需要實(shí)現(xiàn)一個(gè)自己的預(yù)加載策略，在一些不需要預(yù)加載的場(chǎng)景加我們可以不配置，首先我們新建一個(gè)selective-preloading-strategy.ts的文件，使用class實(shí)現(xiàn)PreloadingStrategy接口的preload方法，代碼如下：

import { PreloadingStrategy, Route } from "@angular/router";
import { Observable } from "rxjs";
/**
 * 預(yù)加載策略
 */
export class SelectivePreloadingStrategy implements PreloadingStrategy {
  preload(route: Route, load: Function): Observable<any> {
    //當(dāng)路由中配置data: {preload: true}時(shí)預(yù)加載
    return route.data && route.data && route.data['preload'] ? load() : Observable.of(null);
  }

}

上面的意思很簡(jiǎn)單，當(dāng)你在路由中配置了data: {preload: true}參數(shù)后，這里面的策略就返回一個(gè)load()，表示需要預(yù)加載，如果沒(méi)有配置就不進(jìn)行預(yù)加載，當(dāng)然你也可以反過(guò)來(lái)，默認(rèn)是預(yù)加載，只在配置不需要預(yù)加載的時(shí)候不加載，就像我的github上的一樣，自己靈活運(yùn)用。

接下來(lái)，在在路由中加入策略，也就是RouterModule.forRoot中的配置，代碼如下：

import { NgModule }       from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import {SelectivePreloadingStrategy} from "./selective-preloading-strategy";

import { LoginComponent }   from './login/login.component';
import { MainComponent }  from './main/main.component';



/**
 * app路由
 */
const routes: Routes = [
 { path: '', redirectTo: '/login', pathMatch: 'full' },
 { 
   path: 'login', 
   component: LoginComponent
 },
 { 
   path: 'app', 
   component: MainComponent,
   loadChildren: 'app/main/main.module#MainModule',
   data: {preload: true}
 }
];

export const appRoutes=RouterModule.forRoot(routes,{preloadingStrategy: SelectivePreloadingStrategy});

還需要在AppModule的providers添加，代碼如下：

/**
 * app模塊
 */
@NgModule({
 imports: [
  appRoutes,
  BrowserModule,
  BrowserAnimationsModule,
  NgbModule.forRoot(),
  MainModule,
  LoginModule
 ],
 declarations: [
  AppComponent,
  ToastBoxComponent,
  ToastComponent,
  SpinComponent
 ],
 providers: [AppService,ToastService,HttpService,SpinService,SelectivePreloadingStrategy],
 exports:[ToastBoxComponent,SpinComponent],
 bootstrap: [ AppComponent ]
})
export class AppModule {}

接下來(lái)在路由中使用，代碼如下：

import { NgModule, OnInit } from '@angular/core';
import { RouterModule, Routes, Router } from '@angular/router';

/**
 * 主體路由
 */
const routes: Routes = [
   { path: 'home', loadChildren: 'app/home/home.module#HomeModule', data: {preload: true} },
   { path: 'demo', loadChildren: 'app/demo/demo.module#DemoModule', data: {preload: true} },
];

export const mainRoutes = RouterModule.forChild(routes);

打開(kāi)瀏覽器F12，查看js的加載，你會(huì)發(fā)現(xiàn)，當(dāng)頁(yè)面加載完后，會(huì)預(yù)加載其它模塊的js