Vue?3?進(jìn)階用法之異步組件
一、代碼分割
一個大型前端應(yīng)用，如果所有代碼都放在單一文件，體積會特別大，下載時間長，白屏?xí)r間久，用戶體驗差。
代碼分割是一種有效的優(yōu)化方式。提前把代碼切分為多個小塊，只下載當(dāng)前必需的部分，用到哪塊下載哪塊。就像吃自助餐一樣，吃多少拿多少。
早期的代碼分割一般通過webpack實現(xiàn)。隨著 ES6 的不斷流行，原生的import()成為更好的選擇。
使用 import() 和《Vue 3 基礎(chǔ)用法：組件入門》介紹的動態(tài)組件，可以實現(xiàn)一個簡單的代碼分割[2]。
實際運行效果如圖：
上面代碼“糙快猛”地實現(xiàn)了代碼分割，但是離“完美”還有一些差距：
如果組件報錯，怎么處理？
如果加載時間長，如何處理？
如果加載超時，怎么辦？
二、異步組件
為了解決加載組件中出現(xiàn)的報錯、超時、狀態(tài)展示等問題，可以使用 Vue 3 提供的異步組件（Async Components），它對于加載過程做了更細(xì)致的控制。
使用defineAsyncComponent() 函數(shù)定義異步組件。它有幾個主要選項：
loader：加載函數(shù)，用于加載指定的目標(biāo)組件
loadingComponent：加載過程中的替身組件
errorComponent：加載失敗的替罪羊組件
delay：設(shè)定替身組件出現(xiàn)的延遲時間。如果加載時間夠快，替身可以不用出場。默認(rèn)值是 200ms。
timeout：設(shè)定超時時間，超過這個時間就算加載失敗。默認(rèn)值是 Infinity，即永不超時。
實例代碼如下：
加載中的狀態(tài)：
加載成功的狀態(tài)：
加載失敗的狀態(tài)：
三、異步組件的簡寫形式
如果你不需要那么多狀態(tài)切換，可以使用異步組件的簡寫形式。只需要傳入 loader 選項對應(yīng)的加載函數(shù)即可。
到此這篇關(guān)于Vue 3 進(jìn)階用法：異步組件的文章就介紹到這了,更多相關(guān)Vue 3 異步組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法
這篇文章主要介紹了vue3使用el-radio-group獲取表格數(shù)據(jù)無法選中問題及解決方法,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
Vue?ELement?Table技巧表格業(yè)務(wù)需求實戰(zhàn)示例
這篇文章主要介紹了Vue?ELement?Table技巧表格業(yè)務(wù)需求實戰(zhàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要為大家詳細(xì)介紹了基于Vue.js實現(xiàn)簡單搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Vue實現(xiàn)父子組件之間的數(shù)據(jù)傳遞
在前端開發(fā)中,Vue.js 是一個非常流行的框架,因其易學(xué)易用而受到許多開發(fā)者的青睞,其中,組件是 Vue 的核心概念之一,組件之間的數(shù)據(jù)傳遞是開發(fā)中的常見需求,本文將探討如何在 Vue 中實現(xiàn)父子組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2024-11-11
這篇文章主要為大家介紹了Vue的鍵盤事件，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
本篇文章主要介紹了vue組件之Alert的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)驗證用戶名是否可用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-01-01
vue3-print-nb實現(xiàn)頁面打印(含分頁打印)示例代碼
大多數(shù)后臺系統(tǒng)中都存在打印的需求,在有打印需求時,對前端來說當(dāng)然是直接打印頁面更容易,下面這篇文章主要給大家介紹了關(guān)于vue3-print-nb實現(xiàn)頁面打印(含分頁打印)的相關(guān)資料,需要的朋友可以參考下2024-01-01
vue的v-on與v-bind,v-on就是用于綁定事件的,下面這篇文章主要給大家介紹了關(guān)于vue3常用的指令之v-bind和v-on指令用法的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue項目中使用window的onresize事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08