New import syntax increases build size significantly

[cliffordh]

Switching from this style of importing bootstrap-vue components to the new "non-ES" method increases build size 200kb. I am only specifically using these components in my app:

import bNavbar from "bootstrap-vue/es/components/navbar/navbar";
import bNavbarNav from "bootstrap-vue/es/components/navbar/navbar-nav";
import bNavbarBrand from "bootstrap-vue/es/components/navbar/navbar-brand";
import bNavbarToggle from "bootstrap-vue/es/components/navbar/navbar-toggle";
import bNavItem from "bootstrap-vue/es/components/nav/nav-item";
import bNav from "bootstrap-vue/es/components/nav/nav";
import bCollapse from "bootstrap-vue/es/components/collapse/collapse";
import BLink from "bootstrap-vue/es/components/link/link";
import bNavItemDropdown from "bootstrap-vue/es/components/nav/nav-item-dropdown";
import bDropdownItem from "bootstrap-vue/es/components/dropdown/dropdown-item";
import bButton from "bootstrap-vue/es/components/button/button";
import bAlert from "bootstrap-vue/es/components/alert/alert";
import bModal from "bootstrap-vue/es/components/modal/modal";
import { VBToggle } from "bootstrap-vue/es/directives/toggle/toggle";

Any ideas what I can do to improve the build size using the new system, or is this a bug?

[tmorehouse]

Are you importing from dist/bootstrap-vue.esm.js, dist/bootstrap-vue.common.js or esm/index.js? module bundlers should pick up from esm/index.js (which tree shakes better than the esm.js bundle, and the common.js bundle won't tree shake at all))

Are you using webpack or some other module bundler?

We have a PR #3462 which should address some of the increased bundle size (for some of the larger components), and PR #3446 which reduced imports by splitting the config-set from the config-get routines. Both of which will be available in the next release.

Webpack 5, when it is released (5.0.0-alpha.15 is out now, specifically PR webpack/webpack#9203) will also reduce bundle sizes by only importing what is truly needed.

[tmorehouse]

Here is what I an getting for importing the above components and directive individually (all imported in the same file/page) when using the code from PR #3462

Note this size includes the bootstrap-vue CSS file as well.

[cliffordh]

I changed the ES import syntax posted above to simply:
import bNavbar from "bootstrap-vue"

I'm using the standard vue-cli-service build command

[tmorehouse]

@cliffordh I used the following import syntax:

import {
  'BNavbar',
  'BNavbarNav',
  'BNavbarBrand',
  'BNavbarToggle',
  'BNavItem',
  'BNav',
  'BCollapse',
  'BLink',
  'BNavItemDropdown',
  'BDropdownItem',
  'BButton',
  'BAlert',
  'BModal',
  'VBToggle'
} from 'bootstrap-vue'

Make sure you import all in a single import statement, where possible, to prevent duplicate imports of utility sub-modules.

[cliffordh]

That was it. In fact, I saved about 10kb with this method now vs the older syntax.

Thanks for the help!

[tmorehouse]

Yeah, the new import syntax (when using the esm/ module entrypoint), avoids all the older common js overhead.

And the imports in a single statement get around some weird webpack issues (i.e. duplicate bundling of utility modules)

[tmorehouse]

@cliffordh with the upcoming 2.0.0-rc.23 release, you should see even more of a decrease in bundle size when importing individual components/directives.

[mhelaiwa]

@tmorehouse I tried your way but it still loading the whole library. Now I am importing all needed modules from bootstrap-vue/esm one by one. I know its frustrating to do so, But it includes only needed modules.

NOTE: I am using Laravel-Mix Auto-Extract

/src/imports/bootstrap-vue.js

//Components
import BNavbar from 'bootstrap-vue/esm/components/navbar/navbar'
import BDropdown from 'bootstrap-vue/esm/components/dropdown/dropdown'
import BDropdownItem from 'bootstrap-vue/esm/components/dropdown/dropdown-item'
import BCollapse from 'bootstrap-vue/esm/components/collapse/collapse'

//Directives
import VBToggle from 'bootstrap-vue/esm/directives/toggle/toggle'

export default {
    //Components
    BNavbar,
    BDropdown,
    BDropdownItem,
    BCollapse,

    //Directives
    VBToggle
};

Then I call it inside my app's vues like this.

/src/MyVue.vue

import {EventBus} from '@/EventBus'
    import BootVue from '@/bootstrap-vue'


    export default {
        name:'MyVue',
        template: require('./MyVue.html'),
        components: {
            'b-navbar':BootVue.BNavbar,
            'b-dropdown':BootVue.BDropdown,
            'b-dd-item':BootVue.BDropdownItem,
        }
    }

I don't know if this is a good practice but helped me out down size my vendor file.

This is what I'v got by following your way.

And this is what I'v got following my way.

[tmorehouse]

@enghelewa

You should be importing like so, when selectively importing components, directives or plugins (when using the latest BootstrapVue)

import { BNavbar, BDropdown, BDropdownItem } from 'bootstrap-vue'

export default {
    components: {
        'b-navbar': BNavbar,
        'b-dropdown': BDropdown,
        'b-dd-item': BDropdownItem
    }
}

Make sure you place all of your imports (components, directives, and/or plugins) all in a single import statement.

Also note that Tree Shaking only works when webpack is in production mode and JavaScript minification is enabled (Dead Code Removal). development mode and lack of js minification (i.e. terser or the deprecated uglify-es)

Also it sounds like laraval-mix auto-extract puts the full lib in vendors.js:

This plugin will auto extract all js dependencies coming from node_modules to vendor.js file

If you just want selective component imports, do not add bootstrap-vue to the auto-extract plugin's list, otherwise it will import the whole lib into vendors.

[mhelaiwa]

You're totally right. I figured out that I am using laravel-mix 3 which built on top of webpack 3 and Tree Shaking is available in webpack 4. and there is no need for auto-extract also.

Anyways Thanks for help 🥇