最近我司因業務需求，需要在一個內部數據分析平臺集成在線 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 路由和組件懶加載的一些配置，不過懶加載不是萬能的，還是要從實際需求出發決定是否使用。