Vue：从组件内部的库（Bootstrap-Vue）延迟加载

Question

我正在探索延迟加载功能，并尝试将其用于 Bootstrap-Vue 组件，但它不起作用。

如果我导入 b-card "normally"，它会正确渲染：

import { BCard } from 'bootstrap-vue';
export default {
    components: {
        BCard
    }
};

但是当我尝试 'lazy-load' 语法时它不起作用：

export default {
    components: {        
        BCard: () => import('bootstrap-vue').BCard
    }
};

b-card 组件未渲染，但未抛出任何错误，在 Chrome 的 DOM 检查工具中，我可以看到占位符  已放置通过 Vue b-card 组件应该在哪里。我怀疑加载的库对象没有 BCard 属性，但我不知道如何使用 'lazy' 语法访问库组件。

是否可以从库中延迟加载模块？怎么做？

Answer 1

动态导入模块时，您使用 import 关键字作为函数，它 returns 是一个承诺。因此，要访问模块组件，您可以使用以下语法：

export default {
  components: {
    BCard: () => import('bootstrap-vue').then(module => module.BCard)
  }
}

Vue: lazy loading from library (Bootstrap-Vue) inside a component