動態

詳情 返回 返回

vue性能優化之異步組件和路由懶加載 - 動態 詳情

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

一、組件優化

圖片

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

圖片

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

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

圖片

圖片

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

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

二、路由懶加載

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

圖片

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

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

圖片

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

圖片

圖片

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

user avatar Leesz 頭像 nihaojob 頭像 teamcode 頭像 qingzhan 頭像 kobe_fans_zxc 頭像 razyliang 頭像 inslog 頭像 dunizb 頭像 zhulongxu 頭像 yuzhihui 頭像 kongsq 頭像 romanticcrystal 頭像
點贊 60 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.