引导vuejs动态异步组件导入

Question

我只想在需要的时候动态导入单个引导组件。

Bellow语法实际上可以做到这一点，但它确实导入了所有组件。

因此，最终的模块包是1.4MB (完整的引导库)。

 BNavbar: () => import('bootstrap-vue').then(module => module.BNavbar),

如何将其更改为只导入navbar，使其等效于

import { BNavbarPlugin } from 'bootstrap-vue'
Vue.use(BNavbarPlugin)

Answer 1

我认为解决方案是将它封装在另一个组件中，比如AppNavbar，它以import { BNavbarPlugin } from 'bootstrap-vue'的基本方式导入BNavbarPlugin，然后动态地导入包装器组件。

AppNavbar: () => import('@/components/AppNavbar')