浅谈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 相关文章推荐
关于文本框的一些限制控制总结~~
Apr 15 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
使用CSS3的scale实现网页整体缩放
Mar 18 Javascript
详解angular2采用自定义指令(Directive)方式加载jquery插件
Feb 09 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
Oct 06 Javascript
Vue使用NProgress的操作过程解析
Oct 10 Javascript
Vue使用预渲染代替SSR的方法
Jul 02 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 31 Javascript
JavaScript文档对象模型DOM
Nov 20 Javascript
浅谈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
针对初学PHP者的疑难问答(1)
2006/10/09 PHP
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
PHP开发过程中常用函数收藏
2009/12/14 PHP
php笔记之:php数组相关函数的使用
2013/04/26 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
php批量删除超链接的实现方法
2015/10/19 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
thinkphp5 migrate数据库迁移工具
2018/02/20 PHP
php实现数组重复数字统计实例
2018/09/30 PHP
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
jQuery 设置 CSS 属性示例介绍
2014/01/16 Javascript
javascript中with()方法的语法格式及使用
2014/08/04 Javascript
jQuery遍历json的方法(推荐)
2016/06/12 Javascript
js方法数据验证的简单实例
2016/09/17 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
JQuery ZTree使用方法详解
2017/01/07 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
Python多线程爬虫简单示例
2016/03/04 Python
对python中的pop函数和append函数详解
2018/05/04 Python
python全栈知识点总结
2019/07/01 Python
Python 发送邮件方法总结
2020/08/10 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
解决img标签上下出现间隙的方法
2016/12/14 HTML / CSS
详解HTML5中的元素与元素
2015/08/17 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
2016/12/20 HTML / CSS
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
个人融资协议书范本两则
2014/10/15 职场文书
借条如何写
2015/05/26 职场文书
python使用openpyxl库读写Excel表格的方法(增删改查操作)
2021/05/02 Python
Mysql 如何实现多张无关联表查询数据并分页
2021/06/05 MySQL
Vue监视数据的原理详解
2022/02/24 Vue.js
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
Win11 Build 25179预览版发布(附更新内容+ISO官方镜像下载)
2022/08/14 数码科技