vue項目性能優化方法

時間 2020-11-30

標籤 vue webpack ios web vue-router vuex npm axios 服務器 dom 欄目系統性能简体版

原文原文鏈接

大概有如下幾點vue

路由組件按需加載

通常一個項目會有多個頁面（路由），利用webpack的代碼分割與vue的異步組件，將代碼按路由作按需加載；能夠大大提升首次打開速度，頁面越多效果越明顯webpack

非頁面一級功能組件拆分按需加載

在剛打開頁面時有些功能是不須要的，好比點擊後的彈窗；能夠將這些功能作拆分，結合vue的異步組件與webpack的代碼分割作按需加載ios

每一個頁面都須要加載的代碼存入cdn

如vue.min.js、axios、vuex.js、vue-router.js等等web

sourceMap相關代碼不要打入js內

sourceMap文件若是打入js內會大大增長js文件大小vue-router

大的圖片不要打成base64

大的圖片打成base64會增長js文件大小vuex

圖片懶加載

不打成base64的圖片作懶加載處理，減小首屏加載的內容，從而提升加載的速度；vue有現成的插件能夠使用npm

靜態資源存入cdn

能夠在打包後利用腳本直接上傳至cdnaxios

vue-ssr

ssr在服務器性能足夠的狀況下能夠加快首屏的渲染，而且對seo友好服務器

vue文件的使用

在使用構建工具時，vue文件要使用不含compiler的，比含有compiler的小30%左右；npm默認加載的是不含compiler的，但存cdn的時候須要注意dom

代碼書寫相關

列表渲染添加key

key能夠在vue作diff處理的時候快速找到能夠複用的dom

函數式組件使用

函數式組件能夠提升組件渲染效率，可是沒有狀態、生命週期

v-if與v-show的使用

v-if首次不須要顯示時能夠減小vue對響應模塊的處理,但切換時比v-show要慢;頻繁切換時用v-show

Object.freeze凍結不須要變動的內容

Object.freeze凍結data中對應的對象以後，vue不會將對應數據轉化成觀察者，能夠提升渲染速度

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。