vue頁面性能優化方案

我的在項目中用到的頁面性能優化的方式總結。

1、均衡頁面加載文件的大小和數量

一、項目中小圖片圖片轉base64，經過工具如webpack進行圖片壓縮，文件進行壓縮混淆等
二、vue-router 懶加載，異步路由
三、第三方依賴按需加載，好比使用element-ui框架，可是裏面的組件只用到了其中一部分，能夠單獨建一個引入element組件的文件，在裏面引入咱們項目中須要的組件，而後vue.use它
四、經過webpack進行處理，有一個externals屬性，能夠在裏面設置不須要打包的文件，好比能夠設置將vue、vue-router、element-ui等等設置進去，打包的時候就不會打包他們，而後將vue、vue-router、element-ui等資源在html中引入
五、能夠藉助開啓gzip壓縮文件，減少文件大小；
六、生產環境build時不生成map文件

2、減小等待經過xhr獲取數據的時間

一、在redis中添加緩存
二、在併發容許且數據量較多的狀況下，分頁能夠交給後端作，利用數據庫進行排序後取出須要的分頁內容，這樣雖然增長了xhr請求，可是單次請求耗費時間會大大下降；後端分頁每次取數據不必定是僅取當前分頁的數據，能夠一次性取當前頁以及當前頁的先後各兩頁的數據，這樣用戶進行先後頁的切換時，不須要從新繼續發起xhr請求。
三、一些內容固定的數據（但又須要進行管理），能夠將這些數據的獲取合併爲一個請求，每次刷新只須要取一次
四、提早發起xhr請求：能夠在dom渲染完成以前就發起xhr請求，而不是等待dom渲染完成以後才進行。created時，或者beforeRouteEnter時就調用。

3、經過交互，在視覺效果上提高

一、能夠經過一些加載loading動畫，以及資源加載完成前，能夠經過佔位符佔位的方式，避免渲染時出現空白頁，視覺上提高加載速度
二、優先加載當前用戶可視區域的內容，其餘內容待用戶切換tab或者滾動鼠標或者可視區域加載完成後再繼續加載
三、圖片預渲染，能夠在當前頁上根據頁面上的跳轉連接（或者tab頁可能的切換），預渲染一些圖片

4、善用vue的一些屬性

一、v-if與v-show根據具體業務場景適當選取
二、善用kee-alive

5、將項目根據業務和模塊，改造爲多頁面，而不是緊靠單頁面支撐

6、代碼優化

一、一些前端能作的事情，能夠在前端本地作，好比當分頁是前端分頁的時候，伴隨的一些排序、篩選等，也能夠由前端實現，節省xhr請求，減小時間損耗
二、通用方法封裝爲模塊，減小代碼冗餘
三、寫一些性能高的代碼