浅谈angular2路由预加载策略

浅谈angular2路由预加载策略

1.问题描述

在没有使路由懒加载的时候，第一次使用的时候加载特别慢，影响用户体验，angular2可以使用loadChildren进行懒加载，第一次使用的时候只会加载需要的模块，其它模块在真正使用的时候才会去加载，这个时候打开浏览器控制台查看js加载的时候，会发现你在使用时候会去加载对应的js，导致第一次点击相应模块的功能时会卡顿一下，后面在使用就不会了，这样还是用户体验不好，接下来告诉你如果使用预加载策略解决这个问题。

2.预加载策略

RouterModule.forRoot的第二个添加了一个配置选项，这人配置选项中就有一个是preloadingStrategy配置，当然它还有其它配置，这里只讲preloadingStrategy，这个配置是一个预加载策略配置，我们需要实现一个自己的预加载策略，在一些不需要预加载的场景加我们可以不配置，首先我们新建一个selective-preloading-strategy.ts的文件，使用class实现PreloadingStrategy接口的preload方法，代码如下：

import { PreloadingStrategy, Route } from "@angular/router";

import { Observable } from "rxjs";

/**

* 预加载策略

*/

export class SelectivePreloadingStrategy implements PreloadingStrategy {

preload(route: Route, load: Function): Observable {

//当路由中配置data: {preload: true}时预加载

return route.data && route.data && route.data['preload'] ? load() : Observable.of(null);

}

}

上面的意思很简单，当你在路由中配置了data: {preload: true}参数后，这里面的策略就返回一个load()，表示需要预加载，如果没有配置就不进行预加载，当然你也可以反过来，默认是预加载，只在配置不需要预加载的时候不加载，就像我的github上的一样，自己灵活运用。

接下来，在在路由中加入策略，也就是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';

impowNbQFbrt { 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,SpinServichttp://e,SelectivePreloadingStrategy],

exports:[ToastBoxComponent,SpinComponent],

bootstrap: [ AppChttp://omponent ]

})

export class AppModule {}

接下来在路由中使用，代码如下：

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);

打开浏览器F12，查看js的加载，你会发现，当页面加载完后，会预加载其它模块的js

官网上有一个默认实现PreloadAllModules ，自行参考官网说明。

具体代码到我的github上找，https://github.com/332557712/cc 。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。