vue实现动态组件按需引入 -批量

单独按需引入的动态组件

 <template><component :is="xxx"> </component></template>
 <script>
	export default{
		components:{
			xxxx: resolve => {require(['./xxx/xxxx.vue']}, resolve);
    	},
	}
 </script>

批量的方式-经验证不能使用computed 会导致死循环

<template><component :is="getComponent('xxx')"> </component></template>
<script>
export default{
	created(){
		this.componentMap = {};
	},
	methods:{
		getComponent(name) {
	      if (this.componentMap[name]) {
	        return this.componentMap[name];
	      }
	      const syncImport = () => import(`./xxx/${name}.vue`);
	      this.componentMap[prop] = syncImport;
	      return syncImport;
	    },
	}
}
</script>

总结 ：核心是使用了 import()