vue项目router切换太慢怎么办

发布时间:2020-07-20 11:13:32 作者:小猪
来源:亿速云 阅读:871

这篇文章主要为大家展示了vue项目router切换太慢怎么办,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

问题定位:

随着项目增大,有一天突然发现页面切换时候,要等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切换太慢怎么办的内容,如果你们有学习到知识或者技能,可以把它分享出去让更多的人看到。

推荐阅读:
  1. Vue Router怎么实现
  2. vue router 通过路由来实现切换头部标题功能

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue router ue

上一篇:计算数IP据报的校验和

下一篇:ng-zorro-antd@0.7.1 修复月份选择bug

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》