component动态引入

<template>
  <div>
     <component
       ref="form"
       v-if="component"
       :is="component"
       :obj="paramObj"
     ></component>
  </div>
</template>

<script>
export default {
  name: "flowForm",
  components: {},
  props: {
    paramObj: {
      type: Object,
      default: {
        type:'see'
      }
    },
  computed: {
    loader() {
      if (!this.formUrl) {
        return null;
      }
      // return () => import(`@/${this.formUrl}`);
      // return eval(`()=>import("@/${this.formUrl}")`)
      // return resolve => require(['@/' + this.formUrl], resolve)
      return () => require.ensure([], (require) => require(`@/${this.formUrl}`))
    },
  },
  data() {
    return {
      component: null,
      formUrl: "",//后端返回的路径
    };
  },
  mounted() {
	this.openDevelopeForm()
  },
  methods: {  
    openDevelopeForm() {
      this.loader()
        .then(() => {
          this.component = () => this.loader();
        })
        .catch((e) => {
          console.log(e)
          this.component = null;
        });
    },
};
</script>

require 有变量在打包的解析的时候会有问题，会造成加载所有变量.vue的文件
所以在运行时，network会运行很多js文件
import 不会有这个问题

但是当项目过大的时候解决开发时编译过慢会在babel.config.js中导入
plugins: [‘dynamic-import-node’] 插件，但是这个插件和import不兼容