vue动态组件能否动态导入

Question

场景分析

当我们使用动态组件的时候，需要先将页面中可能用到的组件全部import进去，这样import进去的组件不就被全部打包到页面中了吗？

问题

但是动态组件是服务端接口返回的，如果前端准备了10个组件（页面中就需要把这10个组件先import进去），然后由服务端动态的接口返回，假设服务端只返回5个，那剩下的5个不是多余的import进去了吗，曾加了包的体积？

目的

那么既然是动态组件能不能动态import呢，在接口返回要使用那些组件的时候再动态的将组件进行import

Answer 1

动态组件服务端返回？异步import('/path/component')不就可以了？

Answer 2

在vue3中你可以这样尝试：

const modules = import.meta.glob('./../../views/**/*.vue');

然后定义一个方法去动态引入

const loadView = (view) => {
  let res;
  for (const path in modules) {
    const dir = path.split('views/')[1].split('.vue')[0];
    if (dir === view) {
      res = () => modules[path]();
    }
  }
  return res;
};