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);

它给了我一个错误，说 bootstrap-vue 组件是未知的 -

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

但如果我只是正常地做import BootstrapVue from 'bootstrap-vue'，它就可以正常工作。但它没有代码拆分。

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

Webpack 配置。我正在使用 laravel-mix -

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');
});

将在 Promise 解决后引导 Vue。