vue3.0+vite2 实现动态异步组件懒加载；

创建一个vite项目

性能决定成败;vite确实快；
cmd 命令行(默认你已经安装了node & npm)，执行npm init @vitejs/app vue-study – --template vue；
cd至vue-study，npm install(安装依赖); npm run dev（启动项目）；

创建组件

新建一个目录为pages，pages下面再新建一个目录contents，contens下面可以新建具体的组件目录页面，此时目录结构为

App.vue

<template>
	<p @click="onChangeContents('./pages/contents/gp/gp.vue')">郭培</p>
	<p @click="onChangeContents('./pages/contents/systemManges/xtcs.vue')">系统参数</p>
	<p>{{currentTabComponent}}</p>
	<!-- <Suspense> -->
	<component :is="DefineAsyncComponent({
					// 工厂函数
					loader: Modeuls[currentTabComponent],
					// // 默认值：Infinity（即永不超时，单位 ms）
					timeout: 3000,
				})"></component>
	<!-- </Suspense> -->
</template>
<script lang="ts">
	import {
		defineComponent,
		defineAsyncComponent,
		reactive,
		ref
	} from 'vue'
	export default defineComponent({
		name: 'App',
		setup() {
			//vite加载指定路径的所有模块
			const Modeuls = import.meta.glob('./pages/contents/*/*');
			const onChangeContents = function(URL) {
				currentTabComponent.value = URL;
				console.log(currentTabComponent)
			}
			let currentTabComponent = ref('./pages/contents/systemManges/xtcs.vue');
			const DefineAsyncComponent = defineAsyncComponent;
			return {
				DefineAsyncComponent,
				currentTabComponent,
				onChangeContents,
				Modeuls
			}
		},
	})
</script>