您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了vue項(xiàng)目router切換太慢怎么辦,內(nèi)容簡(jiǎn)而易懂,希望大家可以學(xué)習(xí)一下,學(xué)習(xí)完之后肯定會(huì)有收獲的,下面讓小編帶大家一起來(lái)看看吧。
問(wèn)題定位:
隨著項(xiàng)目增大,有一天突然發(fā)現(xiàn)頁(yè)面切換時(shí)候,要等1-2s頁(yè)面才切換過(guò)去,然后就開始定位問(wèn)題,剛開始以為時(shí)頁(yè)面組件太多導(dǎo)致的,通過(guò)刪除組件,發(fā)現(xiàn)沒(méi)啥改善,然后就在兩個(gè)頁(yè)面打印日志,第二頁(yè)面created周期時(shí)間和路由切換時(shí)間相差不大,可以排除是頁(yè)面渲染耗時(shí)。然后在第一個(gè)頁(yè)面的destroyed周期里面打印日志,發(fā)現(xiàn)destroyed->router切換耗時(shí)1.5s左右,這時(shí)候定位問(wèn)題是vue的destroyed周期耗時(shí)。
destroyed周期耗時(shí):
這時(shí)候就考慮destroyed為啥要那么久,這時(shí)候就很納悶,第一反應(yīng)肯定是頁(yè)面組件太多,這是把組件都刪了,還是很慢,然后頁(yè)面就剩下一個(gè)表格和查詢條件,然后就想是不是數(shù)據(jù)量太大導(dǎo)致destroyed耗時(shí),然后就查頁(yè)面接口,發(fā)現(xiàn)有個(gè)list接口有4000多條數(shù)據(jù),然后去掉接口,頁(yè)面切換立馬流暢了;就想數(shù)據(jù)多為啥導(dǎo)致銷毀耗時(shí),然后就想到了這個(gè)list是下拉框,這4000多條數(shù)都渲染在頁(yè)面上,銷毀不耗時(shí)才怪呢。
selected下拉框數(shù)據(jù)多,導(dǎo)致銷毀耗時(shí)
然后就想辦法處理select數(shù)據(jù)多問(wèn)題,第一時(shí)間想用服務(wù)端過(guò)濾,想到服務(wù)端性能跟不上,只能在前端過(guò)濾;然后就想辦法在前端過(guò)濾,初始化不給值,篩選的時(shí)候才給篩選過(guò)后的值
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 : []; } }
補(bǔ)充知識(shí):vue路由懶加載鏈接過(guò)多導(dǎo)致本地開發(fā)熱更新慢的解決
解決辦法
通過(guò)vue-cli來(lái)構(gòu)建的項(xiàng)目正常情況下一般的熱更新會(huì)在1-10s之間,但是當(dāng)項(xiàng)目中的路由鏈接數(shù)量達(dá)到一定數(shù)目的時(shí)候我發(fā)現(xiàn)熱更新的速度大幅增加.甚至長(zhǎng)達(dá)2-3分鐘之久,這就讓我堅(jiān)決不能忍了,隨便改點(diǎn)東西就要等如此之久…當(dāng)然這個(gè)跟電腦的CPU是有一定關(guān)系的
于是開始著手解決問(wèn)題,不過(guò)查了好久愣是沒(méi)有什么解決辦法,后來(lái)在一位大佬的幫助下才解決.順便利用這次機(jī)會(huì)記錄一下這個(gè)過(guò)程
首先,在router文件下面創(chuàng)立兩個(gè)js文件,分別為
_import_development.js
和
_import_production.js
如圖:
上代碼
_import_development.js
這個(gè)文件用作本地開發(fā)用
module.exports = file => require('@/views/' + file + '.vue').default
_import_production.js
這個(gè)文件用過(guò)打包部署用
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: '主頁(yè)' }, component: _import('home') }, ]
這樣修改以后在本地開發(fā)就不會(huì)出現(xiàn)熱更新變慢的情況了
基本都在幾秒之內(nèi)
不過(guò)這個(gè)方法只限于路由都在前端項(xiàng)目里寫固定的情況下
如果是動(dòng)態(tài)路由我沒(méi)有試過(guò),不清楚有沒(méi)有用
以上就是關(guān)于vue項(xiàng)目router切換太慢怎么辦的內(nèi)容,如果你們有學(xué)習(xí)到知識(shí)或者技能,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。