問題定位：

隨著專案增大，有一天突然發現頁面切換時候，要等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切換太慢問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。