個人在項目中用到的頁面性能優化的方式總結。
一、均衡頁面加載文件的大小和數量
1、項目中小圖片圖片轉base64，通過工具如webpack進行圖片壓縮，文件進行壓縮混淆等
2、vue-router 懶加載，異步路由
3、第三方依賴按需加載，比如使用element-ui框架，但是里面的組件只用到了其中一部分，可以單獨建一個引入element組件的文件，在里面引入我們項目中需要的組件，然后vue.use它
4、通過webpack進行處理，有一個externals屬性，可以在里面設置不需要打包的文件，比如可以設置將vue、vue-router、element-ui等等設置進去，打包的時候就不會打包他們，然后將vue、vue-router、element-ui等資源在html中引入
5、可以借助開啟gzip壓縮文件，減小文件大小；
6、生產環境build時不生成map文件
二、減少等待通過xhr獲取數據的時間
1、在redis中添加緩存
2、在並發允許且數據量較多的情況下，分頁可以交給后端做，利用數據庫進行排序后取出需要的分頁內容，這樣雖然增加了xhr請求，但是單次請求耗費時間會大大降低；后端分頁每次取數據不一定是僅取當前分頁的數據，可以一次性取當前頁以及當前頁的前后各兩頁的數據，這樣用戶進行前后頁的切換時，不需要重新繼續發起xhr請求。
3、一些內容固定的數據（但又需要進行管理），可以將這些數據的獲取合並為一個請求，每次刷新只需要取一次
4、提前發起xhr請求：可以在dom渲染完成之前就發起xhr請求，而不是等待dom渲染完成之后才進行。created時，或者beforeRouteEnter時就調用。
三、通過交互，在視覺效果上提升
1、可以通過一些加載loading動畫，以及資源加載完成前，可以通過占位符占位的方式，避免渲染時出現空白頁，視覺上提升加載速度
2、優先加載當前用戶可視區域的內容，其他內容待用戶切換tab或者滾動鼠標或者可視區域加載完成后再繼續加載
3、圖片預渲染，可以在當前頁上根據頁面上的跳轉鏈接（或者tab頁可能的切換），預渲染一些圖片
四、善用vue的一些屬性
1、v-if與v-show根據具體業務場景適當選取
2、善用kee-alive
五、將項目根據業務和模塊，改造為多頁面，而不是緊靠單頁面支撐
六、代碼優化
1、一些前端能做的事情，可以在前端本地做，比如當分頁是前端分頁的時候，伴隨的一些排序、篩選等，也可以由前端實現，節省xhr請求，減少時間損耗
2、通用方法封裝為模塊，減少代碼冗余
3、寫一些性能高的代碼