问题定位:
随着项目增大,有一天突然发现页面切换时候,要等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 "color: #ff0000">补充知识:vue路由懒加载链接过多导致本地开发热更新慢的解决解决办法
通过vue-cli来构建的项目正常情况下一般的热更新会在1-10s之间,但是当项目中的路由链接数量达到一定数目的时候我发现热更新的速度大幅增加.甚至长达2-3分钟之久,这就让我坚决不能忍了,随便改点东西就要等如此之久…当然这个跟电脑的CPU是有一定关系的
于是开始着手解决问题,不过查了好久愣是没有什么解决办法,后来在一位大佬的帮助下才解决.顺便利用这次机会记录一下这个过程
首先,在router文件下面创立两个js文件,分别为
_import_development.js
和
_import_production.js
如图:
上代码
_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,切换太慢
更新动态
- 群星.2024-叶振棠80【环星】【FLAC分轨】
- 庄达菲.2024-东张西望(EP)【创娱无界】【FLAC分轨】
- dnf柯涅恩山搬砖怎么走
- dnf武器强化多少会碎
- dnf武器装扮怎么获得
- 【PCL特辑】PUBG三大顶流:PUBG很好玩,千万别开挂
- 在暴风雨的彼端依旧是暴风雨——《三月的狮子》
- 借由《星露谷》事件,聊聊游戏汉化中的“信达雅”
- 黄凤凤.2011-丽风金典系列VOL.2【丽风】【WAV+CUE】
- 郑秀文.2021-ListenToMi(EP)【寰亚】【FLAC分轨】
- 傻子与白痴.2021-YearofFate【哇唧唧哇】【FLAC分轨】
- 玩家晒《剑星》配饰截图:眼镜爱好者大满足!
- 女子买珍珠是贝壳做的 商家回复:这是珍珠的妈妈!
- 《英雄联盟手游》亚索新皮肤明日上线 峡谷吹奏《兰亭序》
- 原画壁纸及美图第203期,无水印可自取