>[success] # 異步組件 1. 對于某些組件我們希望通過異步的方式來進行加載（目的是可以對其進行分包處理），那么Vue中給我們提供了一個函數：`defineAsyncComponent`，如果使用`vue-router` 也可以對路由組件達到相應的效果 >[danger] ##### 舉個例子 1 `vuecli `打包一個正式環境包，隨著組件越來越多相對的`app.js `打包文件會越來越大，可以通過**路由懶加載或者是異步組件的形式分包** 2. 作用就是為了首屏加載時候不加載異步組件用到時候在加載和路由懶加載達到的目的相似 * 沒有使用異步組價  * 使用異步組件（異步組件被單獨提取出來）  >[danger] ##### 用法 1. 在組件書寫定義形式都是一樣的只是在組件引用上不同，有兩種形式 . * 第一種 **工廠函數，該工廠函數需要返回一個Promise對象** ~~~ 1.只是說導入形式需要被defineAsyncComponent 包裹 ~~~ ~~~html <template> <async-comp></async-comp> </template> <script> // 引入異步 import { defineAsyncComponent } from 'vue' // 異步導入組件 const AsyncComp = defineAsyncComponent(() => import('./components/children-todo.vue') ) export default { name: 'App', components: { AsyncComp, }, } </script> <style></style> ~~~ * 第二種 **接受一個對象類型，對異步函數進行配置** ~~~ import { defineAsyncComponent } from 'vue' const AsyncComp = defineAsyncComponent({ // 工廠函數 loader: () => import('./Foo.vue'), // 加載異步組件時要使用的組件 loadingComponent: LoadingComponent, // 加載失敗時要使用的組件 errorComponent: ErrorComponent, // 在顯示 loadingComponent 之前的延遲 | 默認值：200（單位 ms） delay: 200, // 如果提供了 timeout ，并且加載組件的時間超過了設定值，將顯示錯誤組件 // 默認值：Infinity（即永不超時，單位 ms） timeout: 3000, // 定義組件是否可掛起 | 默認值：true suspensible: false, /** * * @param {*} error 錯誤信息對象 * @param {*} retry 一個函數，用于指示當 promise 加載器 reject 時，加載器是否應該重試 * @param {*} fail 一個函數，指示加載程序結束退出 * @param {*} attempts 允許的最大重試次數 */ onError(error, retry, fail, attempts) { if (error.message.match(/fetch/) && attempts <= 3) { // 請求發生錯誤時重試，最多可嘗試 3 次 retry() } else { // 注意，retry/fail 就像 promise 的 resolve/reject 一樣： // 必須調用其中一個才能繼續錯誤處理。 fail() } } }) ~~~ >[info] ## 官方位置 [鏈接](https://v3.cn.vuejs.org/api/global-api.html#defineasynccomponent)