概述

項(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ú)的文件，并在訪(fǎng)問(wèn)webExcel路由的時(shí)候才會(huì)加載。這樣訪(fǎng)問(wèn)home以及about頁(yè)面時(shí)并不會(huì)加載webExcel資源。

懶加載路由配置

打包發(fā)布訪(fǎng)問(wèn)頁(yè)面，首屏秒開(kāi)，直接訪(fǎng)問(wèn)about依舊秒開(kāi)。可是查看網(wǎng)絡(luò)請(qǐng)求時(shí)候發(fā)現(xiàn)訪(fǎng)問(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，訪(fǎng)問(wèn)webExcel頁(yè)面，此時(shí)會(huì)請(qǐng)求webExcel資源并展示組件。

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

在線(xiàn)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)行g(shù)zip打包，這樣服務(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ā)決定是否使用。

以上就是Vue通過(guò)懶加載提升頁(yè)面響應(yīng)速度的詳細(xì)內(nèi)容，更多關(guān)于Vue懶加載提升響應(yīng)速度的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！