vue專案效能優化你了解多少?

2021-10-24 17:54:49 字數 2626 閱讀 2280

最近,博主我也是很苦啊!現在新的開發任務下來了,忙著做產品需求分析,報告,跑業務,晚上加班陪領導酒局,每天累得跟狗一樣。但是我就喜歡這一口,哈哈!!現在我的職業生涯開始真正的步入正軌,今後會不定時的更新文章,謝謝大家對我的支援!(膜拜)

從前的我是乙個最很菜的混子,連最基本的函式方法該怎麼用都不明白,工作之後更慘,最怕每個星期的例會,每次會上最有可能挨批的就是我。

好在我臉皮夠厚,剛出社會遭到過很多的獨打,在長途汽車站明明已經看到汽車站售票大廳了,硬是聽信人家說不在這裡買票,讓黃牛多收幾十塊錢的服務費;去市區逛商場不會用手機地圖迷路了(咿呀!),慢慢就適應了。這就是我,看見自己就來氣,但是我愛他呀!

首先,我們要找到vue效能的現存問題,大部分都是**層面的,然後具體的提出**層優化意見就可以了。 目前所知的vue**層優化大致為一下11點:

1.路由懶載入

2.keep-alive快取頁面

3.使用v-show復用dom

4.v-for 遍歷避免同時使用 v-if

5.長列表效能優化

6.事件的銷毀

7.懶載入

8.第三方外掛程式按需引入

9.無狀態的元件標記為函式式元件

10.子元件分割

11.變數本地化

路由懶載入能夠提高頁面的載入速度,不過使用也得看場合。有時候需要懶載入,提公升首頁載入速度,一般是頁面層級較為複雜的時候。

看乙個瀏覽器中不加**分夠割的例項:

1.這裡藍色部分是webpack自動分割出來的,當修改業務js時候manifest和vendor是不會改變的,瀏覽器直接在快取中提取。

所以webpack就提供了這樣一種**分割的工具,看看**:

顯示el-button

>

這裡大家就要注意了

v-show和v-if同樣都能夠達到顯示和隱藏效果,這裡就要區別了。前者有display的作用,只是隱藏,還存在dom裡面;而v-if就是從節點裡面刪除,dom裡面也刪除了。這樣就有個問題了,如果是乙個顯示隱藏的問題,最好用v-show,v-if每次都需要重新建立dom節點渲染,消耗瀏覽器效能。

v-ifv-for一起使用時,v-for 具有比 v-if 更高的優先順序,這意味著 v-if 將分別重複執行於每個 v-for 迴圈中

所以,不推薦v-if和v-for同時使用

如果是大資料長列表,可採用虛擬滾動,只渲染少部分區域的內容

vue 元件銷毀時,會自動解綁它的全部指令及事件***,但是僅限於元件本身的事件

created()

,beforedestroy()

對於過多的頁面,為了加速頁面載入速度。

所以很多時候我們需要將頁面內未出現在可視區域內的先不做載入, 等到滾動到可視區域後再去載入

如果在專案中使用了element-ui第三方外掛程式庫,我們不需要全部引入裡面的組建,需要用到哪個組建引用就行,避免專案打包體積太大

vue專案效能優化策略

按需引入 匯入 element 類似元件時,不要整個匯入使用,只需要匯入使用的元件 論元件的復用性 全域性元件與區域性元件 在專案中無論vue,react都會存在元件復用性問題,這裡主要說在vue中的說明 全域性元件 在main.js進行全域性註冊元件,達到其他元件可以無需再次註冊可直接使用 優點 ...

你了解WINX多少?

struct mywindow public winx window mywindow struct mydialog public winx modaldialog mydialog,idd struct myedit public winx edit myedit 請問,sizeof mywin...

python hashlib你了解多少?

hashlib 可以將乙個字串資料型別的變數轉化成乙個定長的密文的字串,字串裡的每乙個字元都是16進製制數字。演算法 對同乙個字串,用相同的演算法,相同的手段去進行摘要,獲取的值總是相同的。對於同乙個字串,不管什麼環境 什麼語言 多少次執行,使用相同的演算法得到的結果永遠是相同的。只要不是相同的字串...