Vue?3?進(jìn)階用法之異步組件
一、代碼分割
一個(gè)大型前端應(yīng)用，如果所有代碼都放在單一文件，體積會(huì)特別大，下載時(shí)間長，白屏?xí)r間久，用戶體驗(yàn)差。
代碼分割是一種有效的優(yōu)化方式。提前把代碼切分為多個(gè)小塊，只下載當(dāng)前必需的部分，用到哪塊下載哪塊。就像吃自助餐一樣，吃多少拿多少。
早期的代碼分割一般通過webpack實(shí)現(xiàn)。隨著 ES6 的不斷流行，原生的import()成為更好的選擇。
使用 import() 和《Vue 3 基礎(chǔ)用法：組件入門》介紹的動(dòng)態(tài)組件，可以實(shí)現(xiàn)一個(gè)簡單的代碼分割[2]。
實(shí)際運(yùn)行效果如圖：
上面代碼“糙快猛”地實(shí)現(xiàn)了代碼分割，但是離“完美”還有一些差距：
如果組件報(bào)錯(cuò)，怎么處理？
如果加載時(shí)間長，如何處理？
如果加載超時(shí)，怎么辦？
二、異步組件
為了解決加載組件中出現(xiàn)的報(bào)錯(cuò)、超時(shí)、狀態(tài)展示等問題，可以使用 Vue 3 提供的異步組件（Async Components），它對(duì)于加載過程做了更細(xì)致的控制。
使用defineAsyncComponent() 函數(shù)定義異步組件。它有幾個(gè)主要選項(xiàng)：
loader：加載函數(shù)，用于加載指定的目標(biāo)組件
loadingComponent：加載過程中的替身組件
errorComponent：加載失敗的替罪羊組件
delay：設(shè)定替身組件出現(xiàn)的延遲時(shí)間。如果加載時(shí)間夠快，替身可以不用出場(chǎng)。默認(rèn)值是 200ms。
timeout：設(shè)定超時(shí)時(shí)間，超過這個(gè)時(shí)間就算加載失敗。默認(rèn)值是 Infinity，即永不超時(shí)。
實(shí)例代碼如下：
加載中的狀態(tài)：
加載成功的狀態(tài)：
加載失敗的狀態(tài)：
三、異步組件的簡寫形式
如果你不需要那么多狀態(tài)切換，可以使用異步組件的簡寫形式。只需要傳入 loader 選項(xiàng)對(duì)應(yīng)的加載函數(shù)即可。
到此這篇關(guān)于Vue 3 進(jìn)階用法：異步組件的文章就介紹到這了,更多相關(guān)Vue 3 異步組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
解決ant-design-vue安裝報(bào)錯(cuò)的問題
這篇文章主要介紹了解決ant-design-vue安裝報(bào)錯(cuò)的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
Vue實(shí)現(xiàn)JSON字符串格式化編輯器組件功能
這篇文章主要介紹了Vue實(shí)現(xiàn)JSON字符串格式化編輯器組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-01-01
Vue-Typed-JS打字動(dòng)畫效果實(shí)現(xiàn)全過程
Vue-typed-js是一個(gè)用于Vue.js的Typed.js集成插件,它可以創(chuàng)建打字動(dòng)畫效果,這篇文章主要介紹了Vue-Typed-JS打字動(dòng)畫效果實(shí)現(xiàn)的相關(guān)資料,文中將插件的安裝及使用介紹的非常詳細(xì),需要的朋友可以參考下2025-08-08
這篇文章主要介紹了 vue中v-for 循環(huán)對(duì)象中的屬性，文章圍繞v-for 循環(huán)對(duì)象的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)大家有所幫助2021-11-11
Vue2.0使用嵌套路由實(shí)現(xiàn)頁面內(nèi)容切換/公用一級(jí)菜單控制頁面內(nèi)容切換(推薦)
這篇文章主要介紹了Vue2.0使用嵌套路由實(shí)現(xiàn)頁面內(nèi)容切換/公用一級(jí)菜單控制頁面內(nèi)容切換,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vue .then和鏈?zhǔn)秸{(diào)用操作方法
這篇文章主要介紹了vue .then和鏈?zhǔn)秸{(diào)用操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了vue中form表單禁用專用組件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了如何解決wang-editor 上傳圖片后端接收不到的問題，文中通過圖文結(jié)合給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-02-02
Vue3實(shí)現(xiàn)canvas畫布組件自定義畫板實(shí)例代碼
Vue?Canvas是一個(gè)基于Vue.js的輕量級(jí)畫板組件,旨在提供一個(gè)簡易的畫布功能,用戶可以在網(wǎng)頁上進(jìn)行自由繪圖,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作
這篇文章主要介紹了nuxt 自定義 auth 中間件實(shí)現(xiàn)令牌的持久化操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11