Vue 3 進階用法：非同步元件

一、程式碼分割

一個大型前端應用，如果所有程式碼都放在單一檔案，體積會特別大，下載時間長，白屏時間久，使用者體驗差。

程式碼分割是一種有效的最佳化方式。提前把程式碼切分為多個小塊，只下載當前必需的部分，用到哪塊下載哪塊。就像吃自助餐一樣，吃多少拿多少。

早期的程式碼分割一般透過 webpack 實現。隨著 ES6 的不斷流行，原生的 import() 成為更好的選擇。

使用 import() 和《Vue 3 基礎用法：元件入門》介紹的動態元件，可以實現一個簡單的程式碼分割^[2]。

實際執行效果如圖：

上面程式碼“糙快猛”地實現了程式碼分割，但是離“完美”還有一些差距：

1. 如果元件報錯，怎麼處理？

2. 如果載入時間長，如何處理？

3. 如果載入超時，怎麼辦？

二、非同步元件

為了解決載入元件中出現的報錯、超時、狀態展示等問題，可以使用 Vue 3 提供的非同步元件（Async Components），它對於載入過程做了更細緻的控制。

使用 defineAsyncComponent() 函式定義非同步元件。它有幾個主要選項：

• loader：載入函式，用於載入指定的目標元件

• loadingComponent：載入過程中的替身元件

• errorComponent：載入失敗的替罪羊元件

• delay：設定替身元件出現的延遲時間。如果載入時間夠快，替身可以不用出場。預設值是 200ms。

• timeout：設定超時時間，超過這個時間就算載入失敗。預設值是 Infinity，即永不超時。

例項程式碼如下：

載入中的狀態：

載入成功的狀態：

載入失敗的狀態：

三、非同步元件的簡寫形式

如果你不需要那麼多狀態切換，可以使用非同步元件的簡寫形式。只需要傳入 loader 選項對應的載入函式即可。