概述

專案的目的是要通過資料透視表和Excel公式來分析公司的各項運營資料。不過在整合後，在開發環境頁面執行流暢，大量資料載入處理也很快。但是釋出生產後，在使用者每次開啟頁面時，載入時間上相較開發階段均有所降低，經過排查速度變慢是由於釋出包的vendor.js變大所導致的，這個檔案載入每次都需300毫秒左右，由於小的vue專案並沒有做模組劃分，所以所有的程式碼都直接打包到了vendor中，在集成了新功能後，釋出包也隨之變大了。http://www.cppcns.com

既然找到了原因，就開始著手優化，在前端對於需載入較大資源時，一般都採用懶載入的方式來優化效率。

什麼是懶載入？

懶載入也叫做延時載入，在

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

開始優化

首先是專案環境：Vue 2.6

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

劃分業務模組

通過路由非同步載入模組，加速首屏以及其他頁面載入速度，在Vue Router中將webExcel模組配置為懶載入模式，配置後webExcel元件會按照指定的webpackChunkNakCvBQNhB

懶載入路由配置

打包釋出訪問頁面，首屏秒開，直接訪問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）時候可以給使用者一個提示。

（頁面模板）

（非同步元件懶載入）

頁面上通過disp程式設計客棧layDesigner屬性控制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打包，這樣伺服器直接返回打包後的資源不需要再次打包了。通http://www.cppcns.com過使用compression-webpack-plugin外掛可以在打包時直接生成gz壓縮檔案。關於gzip的配置可以根據具體部署情況設定。

總結

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

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

以上就是Vue通過懶載入提升頁面響應速度的詳細內容，更多關於Vue懶載入提升響應速度的資料請關注我們其它相關文章！