defineAsyncComponent加载异步和分包的使用方法
时间: 2024-04-06 10:11:45 浏览: 16
Vue 3 中定义异步组件的方式有所改变,我们需要使用 defineAsyncComponent 函数来定义异步组件。它的使用方法如下:
1. 定义一个异步组件:
```
const MyComponent = defineAsyncComponent({
// 异步加载组件
loader: () => import('./MyComponent.vue'),
// 加载组件时显示的组件
loadingComponent: LoadingComponent,
// 加载组件失败时显示的组件
errorComponent: ErrorComponent,
// 定义超时时间,默认是 `3000` 毫秒
delay: 200,
// 定义超时时间之后显示的组件
timeoutComponent: TimeoutComponent
})
```
2. 在组件中使用异步组件:
```
<template>
<div>
<my-component />
</div>
</template>
<script>
import { defineAsyncComponent } from 'vue'
const MyComponent = defineAsyncComponent({
// 异步加载组件
loader: () => import('./MyComponent.vue'),
// 加载组件时显示的组件
loadingComponent: LoadingComponent,
// 加载组件失败时显示的组件
errorComponent: ErrorComponent,
// 定义超时时间,默认是 `3000` 毫秒
delay: 200,
// 定义超时时间之后显示的组件
timeoutComponent: TimeoutComponent
})
export default {
components: {
MyComponent
}
}
</script>
```
3. 分包加载异步组件:
```
const MyComponent = defineAsyncComponent(() => {
return import(/* webpackChunkName: "MyComponent" */ './MyComponent.vue')
})
```
在 webpack 中使用 `/* webpackChunkName: "MyComponent" */` 来为异步组件指定一个名称,这样 webpack 就会把它打包成一个单独的文件,实现分包加载。