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

Question

I'm using webpack chunking to split my components

Using these 2 libraries -

"babel-plugin-dynamic-import-webpack": "^1.1.0",
"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: '/',
}

While this isn't a direct answer, you might want to look at: bootstrap-vue.js.org/docs/#tree-shaking-with-module-bundlers for the case of importing parts of bootstrap-vue — Hiws

madflow madflow · Accepted Answer · 2019-10-06T11:02:59

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.

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

1 Answers