Webpack - Code splitting: split library into it's own file

Question

I'm using webpack chunking to split my components

Using these 2 libraries -

1. "babel-plugin-dynamic-import-webpack": "^1.1.0",
2. "babel-plugin-syntax-dynamic-import": "^6.18.0",

When I do lazy loading on components -

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

It works fine But when I try to lazy load a library like bootstrap-vue -

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

It gives me error saying that bootstrap-vue components are unknown -

Error message: Unknown custom element: <b-container> - did you register the component correctly?

But if I just do it normally import BootstrapVue from 'bootstrap-vue' , it works fine. But it doesn't code split.

What's a good way of importing a library with webpack chunking and making its own file?

Webpack configuration. I am using laravel-mix -

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

Answer 1

import returns a Promise. So this:

const promise = import(/* webpackChunkName: "bootstrap-vue" */ 'bootstrap-vue');

promise.then(BootstrapVue => {
  Vue.use(BootstrapVue);
  new Vue({
    render: h => h(App)
  }).$mount('#app');
});

will Bootstrap Vue after the Promise has resolved.