当前位置:Gxlcms > JavaScript > 浅谈angular2路由预加载策略

浅谈angular2路由预加载策略

时间:2021-07-01 10:21:17 帮助过:8人阅读

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<any> {
    //当路由中配置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';
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 {}

 接下来在路由中使用,代码如下:

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 。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

人气教程排行