vue3中jsx函数组件如何异步加载

普通的.vue文件直接可以利用defineAsyncComponent()异步，但对jsx函数组件失效

import { defineAsyncComponent } from 'vue';
//.vue组件正常
const load = defineAsyncComponent(() => import('./components/load/index.vue'));

//jsx函数组件不显示
const loading = defineAsyncComponent(() => import('@/components/loading'));

请问jsx函数组件如何使用defineAsyncComponent()呢

JSX组件
1.默认暴露可以直接
const loading = defineAsyncComponent(() => import('@/components/loading'));
2.分别暴露的情况下需要特殊处理 （分别暴露，可以在一个文件中写多个jsx组件）
const loading = defineAsyncComponent(() => import('@/components/loading').then(({ loading }) => loading));

用其他的方式实现异步加载
换个思路，本身的解析格式就是不一样的，.vue文件、.jsx文件 两者本身就不是同样的一种解析方式

defineAsyncComponent 异步组件_文摘资讯的博客-CSDN博客 Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入：// 将// import UserDetails from './views/UserDetails'// 替换成const UserDetails = () => import('./views/UserDetails')const router = createRo... https://blog.csdn.net/gtLBTNq9mr3/article/details/124905430

参考下这种异步加载方式，如果没用的话再找下其他的异步加载方式