开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 27 天，点击查看活动详情

说点题外话

在项目过大的时候，对于某些组件我么希望可以通过异步的方式进行加载，目的是为了对其进行分包处理

Vue3中提供了一个函数可以进行异步加载：defineAsyncComponent

说正文

1. # defineAsyncComponent

defineAsyncComponent会接受两种类型的参数：

• 类型一：工厂函数，该工厂函数会返回一个Promise对象

• 类型二：接受一个对象类型，对异步函数进行配置

Vue中利用webpack特性实现异步加载组件

利用工厂函数（常用）

1. 引入vue3提供的defineAsyncComponent函数

2. 创建工厂函数引入组件

//App.vue
    <home></home>
    <async-category></async-category>

<script>
import Home from './Home.vue'

// 1. 引入defineAsyncComponent
import { defineAsyncComponent } from 'vue';

// 2. 创建工厂函数
const AsyncCategory = defineAsyncComponent(() => import("./AsyncCategory.vue"))

export default {
  components: {
    Home,
    AsyncCategory
  }
}
</script>

//AsyncCategory.vue为正常vue文件

打包后的dist/js文件夹下会新增文件，新增文件为单独打包AsyncCategory.vue文件。刷新页面Home组件内容不会闪烁，AsyncCategory组件内容因为按需加载会出现闪烁。

利用对象方式（不常用）

<template>
  <div>
    <home></home>
    <async-category></async-category>
  </div>
</template>

<script>
import Home from './Home.vue'
import Loading from './Loading.vue'   //按需加载前显示的占位符组件

// 1. 引入defineAsyncComponent
import { defineAsyncComponent } from 'vue';

// 2. 创建工厂函数

// 利用对象方式
const AsyncCategory = defineAsyncComponent({
  loader: () => import("./AsyncCategory.vue"),
  loadingComponent: Loading    //按需加载前显示的占位符
  errorComponent: errorComponent,   //组件显示失败展示
  delay: 2000,   //在显示loadingComponent组件之前，等待的时间（相当于2000ms后没有加载到loader组件，才加载loadingComponent组件）
})

export default 
  components: {
    Home,
    AsyncCategory
  }
}
</script>

结束

1、Vue3 提供了 defineAsyncComponent 方法与 Suspense 内置组件，我们可以用它们作为优雅的异步组件加载方案。

2、 异步组件高级声明方法中的 component 选项更名为loader；

2、loader绑定的组件加载函数不再接收resolve和reject参数，而且必须返回一个Promise；