Vue通過懶加載提升頁面響應速度
概述
項目的目的是要通過數據透視表和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路由和組件懶加載的一些配置，不過懶加載不是萬能的，還是要從實際需求出發決定是否使用。
以上就是Vue通過懶加載提升頁面響應速度的詳細內容，更多關於Vue懶加載提升響應速度的資料請關註WalkonNet其它相關文章！