Webpack - 代码拆分：将库拆分为自己的文件

Question

我正在使用 webpack 分块来拆分我的组件

使用这两个库 -

1. "babel-plugin-dynamic-import-webpack"： "^1.1.0"，
2. "babel-plugin-syntax-dynamic-import"： "^6.18.0"，

当我对组件进行延迟加载时 -

const component1 = () => import(/* webpackChunkName: "components" */ '../components/Component1.vue');

它工作正常 但是当我尝试延迟加载像bootstrap-vue这样的库时 -

const BootstrapVue = () => import(/* webpackChunkName: "bootstrap-vue" */ 'bootstrap-vue')
Vue.use(BootstrapVue);

它给了我错误，说引导 vue 组件未知 -

错误消息：Unknown custom element: <b-container> - did you register the component correctly?

但是如果我只是正常地做import BootstrapVue from 'bootstrap-vue'，它工作正常。但它不会拆分代码。

使用 webpack 分块导入库并制作自己的文件的好方法是什么？

网络包配置。我正在使用拉拉维尔混合物 -

webpackConfig.output = {
chunkFilename: 'js/[name].bundle.js',
publicPath: '/',
}

Answer 1

>import返回一个 Promise。所以这个：

const promise = import(/* webpackChunkName: "bootstrap-vue" */ 'bootstrap-vue');
promise.then(BootstrapVue => {
Vue.use(BootstrapVue);
new Vue({
render: h => h(App)
}).$mount('#app');
});

将在承诺解决后引导 Vue。