浅谈angular2路由预加载策略


Posted in Javascript onOctober 04, 2017

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

浅谈angular2路由预加载策略

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

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

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

Javascript 相关文章推荐
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
网站基于flash实现的Banner图切换效果代码
Oct 14 Javascript
Bootstrap按钮下拉菜单组件详解
May 10 Javascript
jQuery内存泄露解决办法
Dec 13 Javascript
jQuery Ajax全解析
Feb 13 Javascript
从零学习node.js之简易的网络爬虫(四)
Feb 22 Javascript
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
Vue表单输入绑定的示例代码
Nov 01 Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
Aug 12 Javascript
vue移动端实现手机左右滑动入场动画
Jun 17 Javascript
Vite和Vue CLI的优劣
Jan 30 Vue.js
浅谈Angular路由复用策略
Oct 04 #Javascript
React-Native之定时器Timer的实现代码
Oct 04 #Javascript
vuejs使用$emit和$on进行组件之间的传值的示例
Oct 04 #Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 #Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 #Javascript
原生js封装运动框架的示例讲解
Oct 01 #Javascript
JS Testing Properties 判断属性是否在对象里的方法
Oct 01 #Javascript
You might like
星际玩家的三大定律
2020/03/04 星际争霸
php 安全过滤函数代码
2011/05/07 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
Input 特殊事件onpopertychange和oninput
2009/06/17 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
jQuery阻止同类型事件小结
2013/04/19 Javascript
jQuery 插件开发指南
2014/11/14 Javascript
js实现的二分查找算法实例
2016/01/21 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
JavaScript判断数组是否存在key的简单实例
2016/08/03 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
2016/09/08 Javascript
浅谈AngularJS中ng-class的使用方法
2016/11/11 Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
2017/08/16 Javascript
基于Vue单文件组件详解
2017/09/15 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
python写的ARP攻击代码实例
2014/06/04 Python
Python_LDA实现方法详解
2017/10/25 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
基于Python3.6+splinter实现自动抢火车票
2018/09/25 Python
Python爬虫实现HTTP网络请求多种实现方式
2020/06/19 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
美国尼曼百货官网:Neiman Marcus
2019/09/05 全球购物
愚人节活动策划方案
2014/03/11 职场文书
新闻编辑求职信
2014/04/09 职场文书
消防安全责任书范本
2014/04/15 职场文书
网站推广策划方案
2014/06/04 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
红旗渠导游词
2015/02/09 职场文书
昆虫记读书笔记
2015/06/26 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
Go语言基础知识点介绍
2021/07/04 Golang