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

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

最近我司因業務需求，需要在一個內部資料分析平臺整合線上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路由和元件懶載入的一些配置，不過懶載入不是萬能的，還是要從實際需求出發決定是否使