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。