Stories

Detail Return Return

vue性能優化之異步組件和路由懶加載 - Stories Detail

今天來聊聊vue2的性能小優化之異步組件跟路由懶加載

一、組件優化

圖片

目前代碼塊中包含了兩個子組件,它們在符合條件的情況下才會渲染,採用了最基礎的方式進行導入。

圖片

頁面刷新後會加載五個文件,在點擊顯示兩個組件時,只會新增一個文件,加載的是element的字體文件,也就是説在頁面初始化時就已經加載了組件文件。

現在我們把它改寫成異步組件,再來做個對比:

圖片

圖片

當我們點擊顯示組件時,控制枱會新增一個請求,這時才會從服務器請求需要顯示的源文件,另外一個組件也是同樣的原理。

這樣做的目的是在首屏渲染時減少加載文件的數量,在需要用到一些組件時才會從服務器獲取,而且不會重複請求,可以有效的減少白屏的時間。

二、路由懶加載

接着來看一下路由懶加載:

圖片

目前這種方式,項目到後期javascript的包會變得非常大,影響頁面加載。

而懶加載簡單來説就是延遲加載或按需加載,即在需要使用到路由的時候才進行加載,修改如下:

圖片

常用的路由懶加載一般有兩種,vue異步組件和ES中的import,不過這樣寫還是不夠太簡便,我們可以寫一個方法將路由組件一次導入。

圖片

圖片

需要注意的是pages文件下的組件將會一次性全部導入,可根據需求來選擇方案,這裏的route.name需要與組件名稱一致,不然無法導入。最後將路由導出即可。

user avatar Leesz Avatar nihaojob Avatar teamcode Avatar qingzhan Avatar kobe_fans_zxc Avatar razyliang Avatar inslog Avatar dunizb Avatar zhulongxu Avatar yuzhihui Avatar kongsq Avatar romanticcrystal Avatar
Favorites 60 users favorite the story!
Favorites

Add a new Comments

Some HTML is okay.