电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術文章
文章詳情頁

解決vue項目router切換太慢問題

瀏覽:2日期:2023-01-03 13:18:25

問題定位:

隨著項目增大,有一天突然發現頁面切換時候,要等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切換太慢問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持好吧啦網。

標簽: Vue
相關文章:
主站蜘蛛池模板: 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 聚合氯化铝_喷雾聚氯化铝_聚合氯化铝铁厂家_郑州亿升化工有限公司 | 招商帮-一站式网络营销服务|搜索营销推广|信息流推广|短视视频营销推广|互联网整合营销|网络推广代运营|招商帮企业招商好帮手 | 离子色谱自动进样器-青岛艾力析实验科技有限公司 | 塑胶跑道施工-硅pu篮球场施工-塑胶网球场建造-丙烯酸球场材料厂家-奥茵 | 权威废金属|废塑料|废纸|废铜|废钢价格|再生资源回收行情报价中心-中废网 | 房车价格_依维柯/大通/东风御风/福特全顺/江铃图片_云梯搬家车厂家-程力专用汽车股份有限公司 | 嘉兴恒升声级计-湖南衡仪声级计-杭州爱华多功能声级计-上海邦沃仪器设备有限公司 | 招商帮-一站式网络营销服务|搜索营销推广|信息流推广|短视视频营销推广|互联网整合营销|网络推广代运营|招商帮企业招商好帮手 | 喷涂流水线,涂装流水线,喷漆流水线-山东天意设备科技有限公司 | 拉伸膜,PE缠绕膜,打包带,封箱胶带,包装膜厂家-东莞宏展包装 | 干粉砂浆设备_干混砂浆生产线_腻子粉加工设备_石膏抹灰砂浆生产成套设备厂家_干粉混合设备_砂子烘干机--郑州铭将机械设备有限公司 | 扫地车厂家-山西洗地机-太原电动扫地车「大同朔州吕梁晋中忻州长治晋城洗地机」山西锦力环保科技有限公司 | 电梯装饰-北京万达中意电梯装饰有限公司 | 烟雾净化器-滤筒除尘器-防爆除尘器-除尘器厂家-东莞执信环保科技有限公司 | 合肥展厅设计-安徽展台设计-合肥展览公司-安徽奥美展览工程有限公司 | 民用音响-拉杆音响-家用音响-ktv专用音响-万昌科技 | 细沙回收机-尾矿干排脱水筛设备-泥石分离机-建筑垃圾分拣机厂家-青州冠诚重工机械有限公司 | 济南律师,济南法律咨询,山东法律顾问-山东沃德律师事务所 | 衬塑设备,衬四氟设备,衬氟设备-淄博鲲鹏防腐设备有限公司 | 英思科GTD-3000EX(美国英思科气体检测仪MX4MX6)百科-北京嘉华众信科技有限公司 | 巨野电机维修-水泵维修-巨野县飞宇机电维修有限公司 | 实验室pH计|电导率仪|溶解氧测定仪|离子浓度计|多参数水质分析仪|pH电极-上海般特仪器有限公司 | 南京欧陆电气股份有限公司-风力发电机官网 | 共享雨伞_共享童车_共享轮椅_共享陪护床-共享产品的领先者_有伞科技 | 变位机,焊接变位机,焊接变位器,小型变位机,小型焊接变位机-济南上弘机电设备有限公司 | 重庆钣金加工厂家首页-专业定做监控电视墙_操作台 | 硬齿面减速机[型号全],ZQ减速机-淄博久增机械 | nalgene洗瓶,nalgene量筒,nalgene窄口瓶,nalgene放水口大瓶,浙江省nalgene代理-杭州雷琪实验器材有限公司 | 耐高温硅酸铝板-硅酸铝棉保温施工|亿欧建设工程 | 山西3A认证|太原AAA信用认证|投标AAA信用证书-山西AAA企业信用评级网 | 上海租奔驰_上海租商务车_上海租车网-矢昂汽车服务公司 | 无锡市珂妮日用化妆品有限公司|珂妮日化官网|洗手液厂家 | 模型公司_模型制作_沙盘模型报价-中国模型网 | 超声波电磁流量计-液位计-孔板流量计-料位计-江苏信仪自动化仪表有限公司 | 合肥网络推广_合肥SEO网站优化-安徽沃龙First | 制样机-密封锤式破碎机-粉碎机-智能马弗炉-南昌科鑫制样 | 北京网站建设-企业网站建设-建站公司-做网站-北京良言多米网络公司 | 超高频感应加热设备_高频感应电源厂家_CCD视觉检测设备_振动盘视觉检测设备_深圳雨滴科技-深圳市雨滴科技有限公司 | 哈尔滨京科脑康神经内科医院-哈尔滨治疗头痛医院-哈尔滨治疗癫痫康复医院 | 滤芯,过滤器,滤油机,贺德克滤芯,精密滤芯_新乡市宇清流体净化技术有限公司 | 暴风影音|