浅谈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<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上找， 。

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