摘要

異步元件允許我們將一個元件延遲到它真正需要被渲染時，才去下載和載入其程式碼。這是一種程式碼分割 (Code Splitting) 的技術，能有效優化大型應用的初始載入速度。

定義與說明

defineAsyncComponent 函數接收一個「載入器函數」(Loader Function)，這個函數必須回傳一個 Promise，該 Promise 在解析時應回傳一個元件的定義。最常見的做法是搭配動態 import() 語法。

實作範例

異步元件示例

import { defineAsyncComponent } from 'vue';

// 只有當 AdminPage 元件需要被渲染時，
// './components/AdminPage.vue' 這個檔案才會被網路請求下載。
const AsyncAdminPage = defineAsyncComponent(
  () => import('./components/AdminPage.vue')
);

// 在元件中正常使用
// <template>
//   <AsyncAdminPage />
// </template>

結論

異步元件是優化 Vue 應用程式效能的關鍵工具。透過按需載入元件，我們可以顯著減少首次載入時需要下載的 JavaScript 檔案大小，提升使用者體驗。

異步元件 Code Splitting 效能優化