没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
解决解决vue项目项目router切换太慢问题切换太慢问题
主要介绍了解决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
如图:
上代码
_import_development.js
weixin_38598745
- 粉丝: 3
- 资源: 924
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
- 1
- 2
前往页