技術標籤：效能優化vue

一、vue-router路由懶載入

懶載入是當路由被訪問的時候才載入對應元件，而不是在首頁就全部載入，以此來提高首頁反應速度。

方法和原理
require-ensure
說明: require.ensure在需要的時候才下載依賴的模組，當引數指定的模組都下載下來了（下載下來的模組還沒執行），便執行引數指定的回撥函式。require.ensure會建立一個chunk，且可以指定該chunk的名稱，如果這個chunk名已經存在了，則將本次依賴的模組合併到已經存在的chunk中，最後這個chunk在webpack構建的時候會單獨生成一個檔案。
語法: require.ensure(dependencies: String[], callback: function([require]), [chunkName: String])

二、打包優化——工程檔案打包的時候不生成.map檔案

npm run build編譯之後，我們檢視編譯生成的檔案，發現有很多.map檔案，這些檔案佔了不小的空間。.map檔案的作用是幫助編譯後的程式碼除錯，但是我們上線的程式碼已經除錯完成，所以上線時可以不生成.map檔案。

修改配置檔案如下即可：

三、切換多入口模式

在vue專案中，我們一般使用vue-cli腳手架搭建單頁面的web工程。生成的專案結構如下圖所示：

main.js是整個單頁面應用唯一的入口檔案

在大型專案中，單一入口無法滿足專案需要，原因有以下兩方面：

（1）單一入口無法拆分按模組獨立部署，不夠靈活

（2）單一入口負載過重，業務模組較多時，點選系統導航選單頻繁切換業務模組，在IE瀏覽器中，瀏覽器記憶體持續上漲，達到 1.5G以上卡頓，瀏覽器容易崩潰。

基於以上兩點原因，大型專案可以採用多入口的模式，好處有以下兩點：

（1）滿足頁面需要分開部署的場景

（2）解決了頁面卡頓和記憶體上漲問題

配置方式參考我的單獨講解多入口配置的博文

四、使用字型圖示代替切圖

字型圖示的優勢:

（1）字型圖示任意縮放不會失真

（2）在專案中匯入後，以css樣式引用，相較於傳統的圖片大大減少請求數量，優化效能

（3）修改方便，如需要切換主題色可由css控制，避免視覺反覆切圖的工作量

線上生成工具: https://icomoon.io/app/#/select

五、使用雪碧圖

雪碧圖的優點:

將多張圖片合併到一張圖片中，可以減小圖片的總大小。
將多張圖片合併成一張圖片後，下載全部所需的資源，只需一次請求。可以減小建立連線的消耗。

六、提取公共樣式和方法

 1.複用的樣式應當提取到公共的樣式表中複用

2.公共的方法應當提取到公共的js中複用

3.表單驗證的提取

七、定時器銷燬

路由離開及時銷燬定時器

beforeDestroy(){
	let that = this
	that.timerLine && clearTimeout(that.timerLine)
}

八、解綁事件

路由離開及時解綁事件:

vm.$off()

九、vue中使用keep-alive

vue2.0提供了一個keep-alive元件，用來快取元件,避免多次載入相應的元件,減少效能消耗，但keep-alive是一把雙刃劍，確實需要快取元件的時候才使用。

十、程式碼層面的優化

1、v-show，v-if 用哪個？

（1）只要涉及到許可權相關的展示無疑要用 v-if

（2）在沒有許可權限制時根據使用者點選的頻次選擇，頻繁切換的使用 v-show，不頻繁切換的使用 v-if（減少頁面中 dom 數量）

2、不要在模板裡面寫過多的表示式與判斷

v-if=“isShow && isAdmin && (a || b)”，這種表示式雖說可以識別，但是不是長久之計，當看著不舒服時，適當的寫到 methods 和 computed 裡面封裝成一個方法，這樣的好處是方便我們在多處判斷相同的表示式，其他許可權相同的元素再判斷展示的時候呼叫同一個方法即可。

3、迴圈呼叫子元件時新增 key

key 可以唯一標識一個迴圈個體，可以使用例如 item.id 作為 key，假如陣列資料是這樣的 [‘a’ , ‘b’, ‘c’, ‘a’],使用 :key=“item” 顯然沒有意義，更好的辦法就是在迴圈的時候 (item, index) in arr，然後 :key="index"來確保key 的唯一性。不設定key值時vue會丟擲警告。

4、遵守編碼規範

語義化標籤，避免亂巢狀，合理命名屬性,使用高效簡潔的css選擇器等等

5、合理利用vue生命週期

減少在created生命週期中做ajax請求,而是放在mounted生命週期中,以不阻塞頁面生成dom