1. defineAsyncComponent 方法

router/index.js 配置如下：

import { defineAsyncComponent } from 'vue'
const _import = path =>
  defineAsyncComponent(() => import(`../views/${path}.vue`))
const routes = [
  {
    path: '/async-component',
    name: 'asyncComponent',
    component: _import('home')
  }
]

2. import.meta.glob 方法

// 1.上面的方法相当于一次性加载了 views 目录下的所有.vue文件，返回一个对象
const modules = import.meta.glob('../views/*/*.vue')
const modules = {
  '../views/about/index.vue': () => import('./src/views/about/index.vue')
}
// 2.动态导入的时候直接，引用
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // ...
    {
      path: 'xxxx',
      name: 'xxxxx',
      // 原来的方式，这个在开发中可行，但是生产中不行
      // component: () => import(`../views${menu.file}`),
      // 改成下面这样
      component: modules[`../views${filename}`]
    }
    // ...
  ]
})

3. 异步加载单个组件

let rankList = defineAsyncComponent(() => import('./rank.vue'))

4. 测试异步加载组件

<template>
  <AsyncDemo />
</template>

<script setup>
import LoadingComponent from './LoadingComponent.vue'
import ErrorComponent from './ErrorComponent.vue'

const time = (t,callback = () => {}) => {
    return new Promise((resolve) => {
        setTimeout(() => {
            callback()
            resolve()
        },t)
    })
}

const AsyncDemo = defineAsyncComponent({
    // 要加载的组件
    loader:() => {
        return new Promise((resolve) => {
            async function(){
                await time(3000)
                const res = await import("./Demo.vue")
                resolve(res)
            }
        })
    },
    // 加载异步组件时使用的组件
    loadingComponent:LoadingComponent,
    // 加载失败时使用的组件
    errorComponent:ErrorComponent,
    // 加载延迟（在显示loadingComponent之前的延迟），默认200
    delay:0,
    // 超时显示组件错误，默认永不超时
    timeout:5000
})
</script>

5. 处理异步组件加载的错误

const asyncComponent = defineAsyncComponent({
  loader: () => import('./components/AsyncComponent.vue'),
  loadingComponent: LoadingComponent, // 可选，加载过程中显示的组件
  errorComponent: ErrorComponent // 可选，加载出错时显示的组件
})