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

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

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

瀏覽:4日期: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
相關文章:
主站蜘蛛池模板: 液压油缸-液压站生产厂家-洛阳泰诺液压科技有限公司 | 陕西安玻璃自动感应门-自动重叠门-磁悬浮平开门厂家【捷申达门业】 | 周口风机|周风风机|河南省周口通用风机厂 | 减速机三参数组合探头|TSM803|壁挂式氧化锆分析仪探头-安徽鹏宸电气有限公司 | 飞扬动力官网-广告公司管理软件,广告公司管理系统,喷绘写真条幅制作管理软件,广告公司ERP系统 | 密集架-密集柜厂家-智能档案密集架-自动选层柜订做-河北风顺金属制品有限公司 | 沈阳缠绕膜价格_沈阳拉伸膜厂家_沈阳缠绕膜厂家直销 | 长江船运_国内海运_内贸船运_大件海运|运输_船舶运输价格_钢材船运_内河运输_风电甲板船_游艇运输_航运货代电话_上海交航船运 | 猪I型/II型胶原-五克隆合剂-细胞冻存培养基-北京博蕾德科技发展有限公司 | 澳门精准正版免费大全,2025新澳门全年免费,新澳天天开奖免费资料大全最新,新澳2025今晚开奖资料,新澳马今天最快最新图库-首页-东莞市傲马网络科技有限公司 | 流程管理|流程管理软件|企业流程管理|微宏科技-AlphaFlow_流程管理系统软件服务商 | 日本SMC气缸接头-速度控制阀-日本三菱伺服电机-苏州禾力自动化科技有限公司 | 大连海岛旅游网>>大连旅游,大连海岛游,旅游景点攻略,海岛旅游官网 | 合肥注册公司|合肥代办营业执照、2024注册公司流程 | 洁净棚-洁净工作棚-无菌室-净化工程公司_北京卫护科技有限公司 | 方源木业官网-四川木门-全国木门专业品牌 | 深圳诚暄fpc首页-柔性线路板,fpc柔性线路板打样生产厂家 | 预制直埋蒸汽保温管-直埋管道-聚氨酯发泡保温管厂家 - 唐山市吉祥保温工贸有限公司 | 石栏杆_青石栏杆_汉白玉栏杆_花岗岩栏杆 - 【石雕之乡】点石石雕石材厂 | 合肥白癜风医院_合肥治疗白癜风医院_合肥看白癜风医院哪家好_合肥华研白癜风医院 | 苹果售后维修点查询,苹果iPhone授权售后维修服务中心 – 修果网 拼装地板,悬浮地板厂家,悬浮式拼装运动地板-石家庄博超地板科技有限公司 | 电销卡_北京电销卡_包月电话卡-豪付网络 | 选宝石船-陆地水上开采「精选」色选机械设备-青州冠诚重工机械有限公司 | 低温等离子清洗机(双气路进口)-嘉润万丰 | 永嘉县奥阳陶瓷阀门有限公司 | 天津电机维修|水泵维修-天津晟佳机电设备有限公司 | DDoS安全防护官网-领先的DDoS安全防护服务商 | 鄂泉泵业官网|(杭州、上海、全国畅销)大流量防汛排涝泵-LW立式排污泵 | 黑龙江「京科脑康」医院-哈尔滨失眠医院_哈尔滨治疗抑郁症医院_哈尔滨精神心理医院 | 锂电池砂磨机|石墨烯砂磨机|碳纳米管砂磨机-常州市奥能达机械设备有限公司 | 专业广州网站建设,微信小程序开发,一物一码和NFC应用开发、物联网、外贸商城、定制系统和APP开发【致茂网络】 | 钢格板|镀锌钢格板|热镀锌钢格板|格栅板|钢格板|钢格栅板|热浸锌钢格板|平台钢格板|镀锌钢格栅板|热镀锌钢格栅板|平台钢格栅板|不锈钢钢格栅板 - 专业钢格板厂家 | 【孔氏陶粒】建筑回填陶粒-南京/合肥/武汉/郑州/重庆/成都/杭州陶粒厂家 | 奇酷教育-Python培训|UI培训|WEB大前端培训|Unity3D培训|HTML5培训|人工智能培训|JAVA开发的教育品牌 | 山东聚盛新型材料有限公司-纳米防腐隔热彩铝板和纳米防腐隔热板以及钛锡板、PVDF氟膜板供应商 | 3d可视化建模_三维展示_产品3d互动数字营销_三维动画制作_3D虚拟商城 【商迪3D】三维展示服务商 广东健伦体育发展有限公司-体育工程配套及销售运动器材的体育用品服务商 | 振动筛-交叉筛-螺旋筛-滚轴筛-正弦筛-方形摇摆筛「新乡振动筛厂家」 | 激光内雕_led玻璃_发光玻璃_内雕玻璃_导光玻璃-石家庄明晨三维科技有限公司 激光内雕-内雕玻璃-发光玻璃 | 时代北利离心机,实验室离心机,医用离心机,低速离心机DT5-2,美国SKC采样泵-上海京工实业有限公司 工业电炉,台车式电炉_厂家-淄博申华工业电炉有限公司 | 南溪在线-南溪招聘找工作、找房子、找对象,南溪综合生活信息门户! | Type-c防水母座|贴片母座|耳机接口|Type-c插座-深圳市步步精科技有限公司 |