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

這個文件用作本地開發用

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切換太慢怎么辦的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。