VUE項目性能優化實踐——經過懶加載提高頁面響應速度

本文由葡萄城技術團隊原創並首發

轉載請註明出處：葡萄城官網，葡萄城爲開發者提供專業的開發工具、解決方案和服務，賦能開發者。

 

最近我司因業務需求，須要在一個內部數據分析平臺集成在線Excel功能，既然咱們本身就是作開發工具的，因此目光天然就落在了我司自研的前端表格產品上。

項目的目的是要經過數據透視表和Excel公式來分析公司的各項運營數據。不過在集成後，在開發環境頁面運行流暢，大量數據加載處理也很快。可是發佈生產後，在用戶每次打開頁面時，加載時間上相較開發階段均有所下降，通過排查速度變慢是因爲發佈包的vendor.js變大所致使的，這個文件加載每次都需300毫秒左右，因爲小的Vue項目並無作模塊劃分，因此全部的代碼都直接打包到了vendor中，在集成了新功能後，發佈包也隨之變大了。

既然找到了緣由，咱們就開始着手優化，在前端對於需加載較大資源時，咱們通常都採用懶加載的方式來優化效率。

什麼是懶加載？

懶加載也叫作延時加載，在網頁響應時不馬上請求資源，待頁面加載完畢或者按需響應時再加載資源，以達到提升頁面響應速度以及節省服務器資源的謎底。網頁中經常使用的懶加載是圖片的懶加載，對於相似淘寶同樣的多圖頁面，若是等待全部圖片都下載完成再響應用沒必要然形成頁面加載的卡頓。對於JS資源的加載也是一樣的道理，大JS的加載會形成JS阻塞，頁面出現中止響應的假死狀態。所以能夠經過按需加載的方式，提升頁面首屏的加載速度。

總結了具體優化步驟，下面咱們就開始着手優化吧！

開始優化

首先是項目環境：Vue 2.6

開發環境：Vue-cli 4.5 + TypeScript 3.9

劃分業務模塊

經過路由異步加載模塊，加速首屏以及其餘頁面加載速度，在Vue Router中將webExcel模塊配置爲懶加載模式，配置後webExcel組件會按照指定的webpackChunkName打包爲單獨的文件，並在訪問webExcel路由的時候纔會加載。這樣訪問home以及about頁面時並不會加載webExcel資源。

 

懶加載路由配置

打包發佈訪問頁面，首屏秒開，直接訪問about依舊秒開。但是查看網絡請求時候發現訪問首頁時請求了about和web Excel的資源。通過排查發現vue-cli在頁面中使用了preload和prefetch預加載機制，在不影響當前頁面加載的狀況下預加載後續頁面須要的資源提高用戶體驗，這裏爲了演示清晰註釋掉prefetch的資源。

（臨時禁用prefetch預加載）

 

開啓路由懶加載後首頁並未加載about和webExcel。

（首頁Home網絡請求）

 

清理網絡請求記錄，點擊Web Excel，訪問webExcel頁面，此時會請求webExcel資源並展現組件。

（webExcel頁面網絡請求）

 

在線Excel組件懶加載，進一步優化使用插件頁面打開速度

優化了路由加載，爲了提高用戶體驗，進一步優化webExcel頁面，開啓組件懶加載，當須要Designer組件的時候再加載。

開啓異步組件的方式相似於路由，直接配置import組件便可，替換原有的靜態import。

（組件懶加載）

 

這裏咱們一步到位使用AsyncComponent配置，這樣在加載組件（loading）時候能夠給用戶一個提示。

（頁面模板）

 

（異步組件懶加載）

 

頁面上經過displayDesigner屬性控制Designer組件是否顯示，setTimeout 3秒後開始加載Designer組件並展現。LoadingComponent在加載時展現loading狀態。

能夠從網絡請求中看到，webExcel加載完3秒後開始請求designer資源，請求時顯示LoadingComponent，請求完畢展現Desinger 組件。

開啓gzip壓縮，加速資源請求速度

爲了進一步加速資源請求，能夠開啓服務器gizp壓縮，目前大部分瀏覽器都支持gzip，能夠開啓服務器的gzip功能，服務器在傳輸資源以前先進行壓縮。

網絡請求Request中會出現以下內容，就表示支持gzip

Accept-Encoding: gzip, deflate, br

Vue-cli能夠在打包時就將資源提早進行gzip打包，這樣服務器直接返回打包後的資源不須要再次打包了。經過使用compression-webpack-plugin插件能夠在打包時直接生成gz壓縮文件。關於gzip的配置能夠根據具體部署狀況設置。

總結

通過以上優化，首屏加載資源僅需Vue基礎組件和Home頁面組件，首屏加載速度回覆到原始200毫秒。其餘未使用Designer組件的頁面也無需加載資源，同時Designer組件加載一次，後續其餘頁面再使用組件也無需再次加載

以上就是關於Vue路由和組件懶加載的一些配置，不過懶加載不是萬能的，仍是要從實際需求出發決定是否使用。