>[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)