1. 程式人生 > 其它 >vue搭建前端腳手架效能優化

vue搭建前端腳手架效能優化

1.使用vuex狀態管理,將全域性元件的共享狀態抽取出來為一個store;元件中通過computed獲取狀態;mutation負責同步任務,action負責非同步任務
2.配置路由懶載入
3.封裝axios,AIP統一管理,方便維護;保證API介面安全性,加token標識身份;使用請求攔截器,響應攔截器
4.webpack配置alias別名簡化路徑,開啟gzip壓縮
5.element元件按需引入,echarts按需引入
6.抽離公共程式碼,模組化,元件化,隔離作用域,避免變數衝突;元件動態載入,對於不在當前視窗的元件先不載入,使用keep-alive快取
7.元件樣式不互相汙染,style標籤加scoped屬性;使用less的變數和巢狀特性
8.程式碼書寫注意v-if和v-show,computed和watch的區別使用場景,列表渲染輸出使用key
9.使用let,const宣告變數,使用箭頭函式
10.使用async await解決非同步回撥
11.防抖節流
12.vue渲染大量資料使用虛擬列表,無限下拉重新整理或者做分頁,增加載入動畫,圖片懶載入
13.頁面長時間未操作超時退出到登入頁