一、概述

在大型項(xiàng)目中，我們可能需要拆分應(yīng)用為更小的塊，以減少主包的體積，并僅在需要時(shí)再?gòu)姆?wù)器加載相關(guān)組件。這時(shí)候就可以使用異步組件。

Vue 提供了 defineAsyncComponent 方法來(lái)實(shí)現(xiàn)此功能，這個(gè)方法接收一個(gè)返回 Promise 的加載函數(shù)。

ES 模塊動(dòng)態(tài)導(dǎo)入會(huì)返回一個(gè) Promise，所以多數(shù)情況下我們會(huì)將它和 defineAsyncComponent 搭配使用。類似 Vite 和 Webpack 這樣的構(gòu)建工具也支持此語(yǔ)法 (并且會(huì)將它們作為打包時(shí)的代碼分割點(diǎn))，因此我們也可以用它來(lái)導(dǎo)入 Vue 單文件組件。

1.1 組件內(nèi)注冊(cè)異步組件（局部注冊(cè)）

1.2 全局注冊(cè)異步組件

二、代碼分包 & 高級(jí)選項(xiàng)配置

2.1 代碼分包

父組件引用子組件，通過(guò) defineAsyncComponent 加載異步配合 import 函數(shù)模式便可以分包，先執(zhí)行?npm run build?指令，觀察異步加載組件打包后?dist?目錄文件。

然后修改代碼為組件同步引入時(shí)，再執(zhí)行?npm run build?指令，觀察打包后?dist目錄下文件的變化。

三、Suspense內(nèi)置組件

<Suspense> 是一個(gè)內(nèi)置組件，用來(lái)在組件樹(shù)中協(xié)調(diào)對(duì)異步依賴的處理。它讓我們可以在組件樹(shù)上層等待下層的多個(gè)嵌套異步依賴項(xiàng)解析完成，并可以在等待時(shí)渲染一個(gè)加載狀態(tài)。如果在渲染時(shí)遇到異步依賴項(xiàng) (異步組件和具有 async setup()的組件)，它將等到所有異步依賴項(xiàng)解析完成時(shí)再顯示默認(rèn)插槽。

四、頂層 await

?? 看完兩件事

如果你覺(jué)得這篇內(nèi)容對(duì)你挺有啟發(fā)，我想邀請(qǐng)你幫我兩個(gè)小忙：

1. 點(diǎn)個(gè)「贊」或者「轉(zhuǎn)發(fā)評(píng)論」，讓更多的人也能看到這篇內(nèi)容（喜歡不點(diǎn)贊，都是耍流氓 -_-）

2. 關(guān)注公眾號(hào)「前端知識(shí)分享喵」，不定時(shí)更新前端技術(shù)分享，

   公眾號(hào)后臺(tái)回復(fù)「電子書(shū)」即可免費(fèi)獲取精選的前端電子書(shū)。

   添加 MagnumHou 微信，可以獲取 up 主有的大機(jī)構(gòu)的學(xué)習(xí)視頻哦?