最近我司因業(yè)務(wù)需求，需要在一個(gè)內(nèi)部數(shù)據(jù)分析平臺(tái)集成在線 Excel 功能，既然我們自己就是做開(kāi)發(fā)工具的，所以目光自然就落在了我司自研的前端表格產(chǎn)品上。

項(xiàng)目的目的是要通過(guò)數(shù)據(jù)透視表和 Excel 公式來(lái)分析公司的各項(xiàng)運(yùn)營(yíng)數(shù)據(jù)。不過(guò)在集成后，在開(kāi)發(fā)環(huán)境頁(yè)面運(yùn)行流暢，大量數(shù)據(jù)加載處理也很快。但是發(fā)布生產(chǎn)后，在用戶(hù)每次打開(kāi)頁(yè)面時(shí)，加載時(shí)間上相較開(kāi)發(fā)階段均有所降低，經(jīng)過(guò)排查速度變慢是由于發(fā)布包的 vendor.js 變大所導(dǎo)致的，這個(gè)文件加載每次都需 300 毫秒左右，由于小的 Vue 項(xiàng)目并沒(méi)有做模塊劃分，所以所有的代碼都直接打包到了 vendor 中，在集成了新功能后，發(fā)布包也隨之變大了。

既然找到了原因，我們就開(kāi)始著手優(yōu)化，在前端對(duì)于需加載較大資源時(shí)，我們一般都采用懶加載的方式來(lái)優(yōu)化效率。

什么是懶加載？

懶加載也叫做延時(shí)加載，在網(wǎng)頁(yè)響應(yīng)時(shí)不立刻請(qǐng)求資源，待頁(yè)面加載完畢或者按需響應(yīng)時(shí)再加載資源，以達(dá)到提高頁(yè)面響應(yīng)速度以及節(jié)省服務(wù)器資源的謎底。網(wǎng)頁(yè)中常用的懶加載是圖片的懶加載，對(duì)于類(lèi)似淘寶一樣的多圖頁(yè)面，如果等待所有圖片都下載完成再響應(yīng)用不必然造成頁(yè)面加載的卡頓。對(duì)于 JS 資源的加載也是同樣的道理，大 JS 的加載會(huì)造成 JS 阻塞，頁(yè)面出現(xiàn)停止響應(yīng)的假死狀態(tài)。因此可以通過(guò)按需加載的方式，提高頁(yè)面首屏的加載速度。

總結(jié)了具體優(yōu)化步驟，下面我們就開(kāi)始著手優(yōu)化吧！

開(kāi)始優(yōu)化

首先是項(xiàng)目環(huán)境：Vue 2.6

開(kāi)發(fā)環(huán)境：Vue-cli 4.5 + TypeScript 3.9

劃分業(yè)務(wù)模塊

通過(guò)路由異步加載模塊，加速首屏以及其他頁(yè)面加載速度，在 Vue Router 中將 webExcel 模塊配置為懶加載模式，配置后 webExcel 組件會(huì)按照指定的 webpackChunkName 打包為單獨(dú)的文件，并在訪問(wèn) webExcel 路由的時(shí)候才會(huì)加載。這樣訪問(wèn) home 以及 about 頁(yè)面時(shí)并不會(huì)加載 webExcel 資源。

懶加載路由配置

打包發(fā)布訪問(wèn)頁(yè)面，首屏秒開(kāi)，直接訪問(wèn) about 依舊秒開(kāi)?？墒遣榭淳W(wǎng)絡(luò)請(qǐng)求時(shí)候發(fā)現(xiàn)訪問(wèn)首頁(yè)時(shí)請(qǐng)求了 about 和 web Excel 的資源。經(jīng)過(guò)排查發(fā)現(xiàn) vue-cli 在頁(yè)面中使用了 preload 和 prefetch 預(yù)加載機(jī)制，在不影響當(dāng)前頁(yè)面加載的情況下預(yù)加載后續(xù)頁(yè)面需要的資源提升用戶(hù)體驗(yàn)，這里為了演示清晰注釋掉 prefetch 的資源。

（臨時(shí)禁用 prefetch 預(yù)加載）

開(kāi)啟路由懶加載后首頁(yè)并未加載 about 和 webExcel。

（首頁(yè) Home 網(wǎng)絡(luò)請(qǐng)求）

清理網(wǎng)絡(luò)請(qǐng)求記錄，點(diǎn)擊 Web Excel，訪問(wèn) webExcel 頁(yè)面，此時(shí)會(huì)請(qǐng)求 webExcel 資源并展示組件。

（webExcel 頁(yè)面網(wǎng)絡(luò)請(qǐng)求）

在線 Excel 組件懶加載，進(jìn)一步優(yōu)化使用插件頁(yè)面打開(kāi)速度

優(yōu)化了路由加載，為了提升用戶(hù)體驗(yàn)，進(jìn)一步優(yōu)化 webExcel 頁(yè)面，開(kāi)啟組件懶加載，當(dāng)需要 designer 組件的時(shí)候再加載。

開(kāi)啟異步組件的方式類(lèi)似于路由，直接配置 import 組件即可，替換原有的靜態(tài) import。

（組件懶加載）

這里我們一步到位使用 AsyncComponent 配置，這樣在加載組件（loading）時(shí)候可以給用戶(hù)一個(gè)提示。

（頁(yè)面模板）

（異步組件懶加載）

頁(yè)面上通過(guò) displaydesigner 屬性控制 designer 組件是否顯示，setTimeout 3 秒后開(kāi)始加載 designer 組件并展示。LoadingComponent 在加載時(shí)展示 loading 狀態(tài)。

可以從網(wǎng)絡(luò)請(qǐng)求中看到，webExcel 加載完 3 秒后開(kāi)始請(qǐng)求 designer 資源，請(qǐng)求時(shí)顯示 LoadingComponent，請(qǐng)求完畢展示 Desinger 組件。

開(kāi)啟 gzip 壓縮，加速資源請(qǐng)求速度

為了進(jìn)一步加速資源請(qǐng)求，可以開(kāi)啟服務(wù)器 gizp 壓縮，目前大部分瀏覽器都支持 gzip，可以開(kāi)啟服務(wù)器的 gzip 功能，服務(wù)器在傳輸資源之前先進(jìn)行壓縮。

網(wǎng)絡(luò)請(qǐng)求 Request 中會(huì)出現(xiàn)如下內(nèi)容，就表示支持 gzip

Accept-Encoding: gzip, deflate, br

Vue-cli 可以在打包時(shí)就將資源提前進(jìn)行 gzip 打包，這樣服務(wù)器直接返回打包后的資源不需要再次打包了。通過(guò)使用 compression-webpack-plugin 插件可以在打包時(shí)直接生成 gz 壓縮文件。關(guān)于 gzip 的配置可以根據(jù)具體部署情況設(shè)置。

總結(jié)

經(jīng)過(guò)以上優(yōu)化，首屏加載資源僅需 Vue 基礎(chǔ)組件和 Home 頁(yè)面組件，首屏加載速度回復(fù)到原始 200 毫秒。其他未使用 designer 組件的頁(yè)面也無(wú)需加載資源，同時(shí) designer 組件加載一次，后續(xù)其他頁(yè)面再使用組件也無(wú)需再次加載

以上就是關(guān)于 Vue 路由和組件懶加載的一些配置，不過(guò)懶加載不是萬(wàn)能的，還是要從實(shí)際需求出發(fā)決定是否使用。

如果還有其他想要了解的，建議出門(mén)左轉(zhuǎn)去補(bǔ)課，不要忘了補(bǔ)課費(fèi)——一鍵三連~~

Vue3.0（正式版）+ Vite開(kāi)發(fā)快速入門(mén)