VUE中怎么通過懶加載提升頁面響應(yīng)速度，相信很多沒有經(jīng)驗(yàn)的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個(gè)問題。

成都創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供黎城網(wǎng)站建設(shè)、黎城做網(wǎng)站、黎城網(wǎng)站設(shè)計(jì)、黎城網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)與制作、黎城企業(yè)網(wǎng)站模板建站服務(wù)，10多年黎城做網(wǎng)站經(jīng)驗(yàn)，不只是建網(wǎng)站，更提供有價(jià)值的思路和整體網(wǎng)絡(luò)服務(wù)。

什么是懶加載？

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

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

開始優(yōu)化

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

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

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

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

懶加載路由配置

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

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

開啟路由懶加載后首頁并未加載about和webExcel。

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

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

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

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

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

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

（組件懶加載）

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

（頁面模板）

（異步組件懶加載）

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

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

開啟gzip壓縮，加速資源請求速度

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

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

Accept-Encoding: gzip, deflate, br

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

看完上述內(nèi)容，你們掌握VUE中怎么通過懶加載提升頁面響應(yīng)速度的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！