解决vue项目router切换太慢问题


Posted in Javascript onJuly 19, 2020

问题定位:

随着项目增大,有一天突然发现页面切换时候,要等1-2s页面才切换过去,然后就开始定位问题,刚开始以为时页面组件太多导致的,通过删除组件,发现没啥改善,然后就在两个页面打印日志,第二页面created周期时间和路由切换时间相差不大,可以排除是页面渲染耗时。然后在第一个页面的destroyed周期里面打印日志,发现destroyed->router切换耗时1.5s左右,这时候定位问题是vue的destroyed周期耗时。

destroyed周期耗时:

这时候就考虑destroyed为啥要那么久,这时候就很纳闷,第一反应肯定是页面组件太多,这是把组件都删了,还是很慢,然后页面就剩下一个表格和查询条件,然后就想是不是数据量太大导致destroyed耗时,然后就查页面接口,发现有个list接口有4000多条数据,然后去掉接口,页面切换立马流畅了;就想数据多为啥导致销毁耗时,然后就想到了这个list是下拉框,这4000多条数都渲染在页面上,销毁不耗时才怪呢。

selected下拉框数据多,导致销毁耗时

然后就想办法处理select数据多问题,第一时间想用服务端过滤,想到服务端性能跟不上,只能在前端过滤;然后就想办法在前端过滤,初始化不给值,筛选的时候才给筛选过后的值

remoteMethod(query) {
   if (query !== "") {
    this.selectLoading = true;
    setTimeout(() => {
     this.selectLoading = false;
     this.source.storeSelectList = this.source.storeList.filter(item => {
      return (
       item.storeName && item.storeName.toLowerCase().indexOf(query.toLowerCase()) > -1
      );
     });
    }, 200);
   } else {
    this.source.storeSelectList = this.search.brandId
     ? this.source.storeList
     : [];
   }
  }

补充知识:vue路由懒加载链接过多导致本地开发热更新慢的解决

解决办法

通过vue-cli来构建的项目正常情况下一般的热更新会在1-10s之间,但是当项目中的路由链接数量达到一定数目的时候我发现热更新的速度大幅增加.甚至长达2-3分钟之久,这就让我坚决不能忍了,随便改点东西就要等如此之久…当然这个跟电脑的CPU是有一定关系的

于是开始着手解决问题,不过查了好久愣是没有什么解决办法,后来在一位大佬的帮助下才解决.顺便利用这次机会记录一下这个过程

首先,在router文件下面创立两个js文件,分别为

_import_development.js

_import_production.js

如图:

解决vue项目router切换太慢问题

上代码

_import_development.js

这个文件用作本地开发用

module.exports = file => require('@/views/' + file + '.vue').default

_import_production.js

这个文件用过打包部署用

module.exports = file => () => import('@/views/' + file + '.vue')

然后需要在index.js里面修改一下

const _import = require('./_import_' + process.env.NODE_ENV);

export const routers = [
  {
    path: '/',
    name: 'home',
    meta: { 
      title: '主页'
    },
    component: _import('home')
  },
]

这样修改以后在本地开发就不会出现热更新变慢的情况了

基本都在几秒之内

解决vue项目router切换太慢问题

不过这个方法只限于路由都在前端项目里写固定的情况下

如果是动态路由我没有试过,不清楚有没有用

以上这篇解决vue项目router切换太慢问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js select常用操作控制代码
Mar 16 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
javascript实现2016新年版日历
Jan 25 Javascript
精通JavaScript的this关键字
May 28 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
详解vue-cli 脚手架 安装
Apr 16 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
Sep 11 Javascript
微信小程序实现吸顶特效
Jan 08 Javascript
Vue 请求传公共参数的操作
Jul 31 Javascript
react中的DOM操作实现
Jun 30 Javascript
解决elementUI 切换tab后 el_table 固定列下方多了一条线问题
Jul 19 #Javascript
vue2.* element tabs tab-pane 动态加载组件操作
Jul 19 #Javascript
解决vue中el-tab-pane切换的问题
Jul 19 #Javascript
解决echarts图表使用v-show控制图表显示不全的问题
Jul 19 #Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
Jul 19 #Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 #Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 #Javascript
You might like
PHP创建/删除/复制文件夹、文件
2016/05/03 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
理解Javascript_05_原型继承原理
2010/10/13 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
node.js中的events.emitter.removeListener方法使用说明
2014/12/10 Javascript
node.js中的fs.readFile方法使用说明
2014/12/15 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
2017/06/13 Javascript
vue用递归组件写树形控件的实例代码
2018/07/19 Javascript
Vue项目环境搭建详细总结
2019/09/26 Javascript
[03:42]2016国际邀请赛中国区预选赛首日现场玩家采访
2016/06/26 DOTA
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
Python解惑之True和False详解
2017/04/24 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
python通过http下载文件的方法详解
2019/07/26 Python
如何表示python中的相对路径
2020/07/08 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
CSS3实现点击放大的动画实例代码
2017/02/27 HTML / CSS
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
英国专业美容产品在线:Mylee(从指甲到脱毛)
2020/07/06 全球购物
小学生防溺水广播稿
2014/01/12 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
机电一体化专业求职信
2014/07/22 职场文书
2014年酒店工作总结与计划
2014/11/17 职场文书
酒店收银员岗位职责
2015/04/07 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
如何使用vue3打造一个物料库
2021/05/08 Vue.js
MySQL中distinct与group by之间的性能进行比较
2021/05/26 MySQL
Python Pandas 删除列操作
2022/03/16 Python