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