Vue.js 延迟加载自定义库组件

Question

我创建了一个包含 2 个组件的小型库并在 UMD 中编译它。 我像这样导出组件：

import Btn from './components/Btn'
import Other from './components/Other'

export { Btn, Other }

我尝试使用惰性导入或导出作为默认值......不是更好。 在我的应用程序中，我将库导入为 npm 依赖项。 之后，在 app.vue 中，我想通过延迟加载加载一个组件（如 Btn）

export default {
  name: 'App',
  components: {
    Btn: () => import('myLib').then(m => m.Btn)
  }
}

这是可行的，但对我不利，因为所有库都已加载并且在我使用 Btn 之后。 有没有办法用真正的延迟加载直接加载组件？

另一种方法是第一次使用完全延迟加载库...

Answer 1

试试这个（未经测试）。不要立即在库中导入模块，而是导出函数。从库中删除所有 import 语句：

.js

export default {
  Btn: () => import('./components/Btn'),
  Other: () => import('./components/Other')
}

像这样使用它：

import myLib from './myLib'
export default {
  name: 'App',
  components: {
    Btn: myLib.Btn
  }
}

你也可以在没有库的情况下做到这一点：

export default {
  name: 'App',
  components: {
    Btn: () => import('./components/Btn')
  }
}