根据条件导入 VueJs 组件

Question

我正在研究微前端架构，其中多个团队在不同的页面上工作，或者可能在一个页面上。

我在 vue2(Feature1.vue) 中有一个组件，我必须根据组件的需要动态导入它。如果不需要 Feature1.vue，那么它不应该是捆绑包的一部分。

如果任何团队需要该组件，那么它将成为构建的一部分，并且捆绑包的大小也会增加。

使用 props 或任何 flag 如果为真，那么只有它应该是包的一部分，如果为假，它应该从包中删除。有可能吗？

我使用的是 Vue 2，我没有使用 Vue 路由器。

Answer 1

https://vuejs.org/v2/guide/components-edge-cases.html#Circular-References-Between-Components

本文与名称无关，但提供了动态导入解决方案。

beforeCreate: function () {
  this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}

components: {
  TreeFolderContents: () => true ? import('./tree-folder-contents.vue') : undefined
}