解决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 相关文章推荐
Asp.Net alert弹出提示信息的几种方法总结
Jan 29 Javascript
JavaScript实现在标题栏上显示当前日期的方法
Mar 19 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
Jul 15 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
Jun 30 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
jQuery序列化form表单数据为JSON对象的实现方法
Sep 20 jQuery
vue单页面在微信下只能分享落地页的解决方案
Apr 15 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 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程序
2006/10/09 PHP
dedecms防止FCK乱格式化你的代码的修改方法
2007/03/17 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
分享3个php获取日历的函数
2015/09/25 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
php模板引擎技术简单实现
2016/03/15 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
清华大学出版的事半功倍系列 javascript全部源代码
2007/05/04 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
举例讲解JavaScript substring()的使用方法
2015/11/09 Javascript
js实现搜索框关键字智能匹配代码
2020/03/26 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
javascript和jQuery实现网页实时聊天的ajax长轮询
2016/07/20 Javascript
js编写的treeview使用方法
2016/11/11 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
python 性能优化方法小结
2017/03/31 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
点球小游戏python脚本
2018/05/22 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python3实现猜数字游戏
2020/12/07 Python
浅谈pytorch卷积核大小的设置对全连接神经元的影响
2020/01/10 Python
Python调用JavaScript代码的方法
2020/10/27 Python
英国床垫和床架购物网站:Bedman
2019/11/04 全球购物
小学安全汇报材料
2014/08/14 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
家长反馈意见及建议
2015/06/03 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
python程序的组织结构详解
2021/12/06 Python
世界无敌的ICOM IC-R9500宽频接收机
2022/03/25 无线电
mysql通过group by分组取最大时间对应数据的两种有效方法
2022/09/23 MySQL