bootstrap-vue: Tree shaking not working

I have a minimal bootstrap-vue application. I basically just used the Vue CLI to create a new project, and added bootstrap-vue as follows:

import BootstrapVue from "bootstrap-vue";
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-vue/dist/bootstrap-vue.css";
Vue.use(BootstrapVue);

I also added font-awesome but that doesn’t appear to take up that much space…

When I perform a build using the Vue UI the build size seems enormous:

File                                   Size              Gzipped

  dist/js/chunk-vendors.efb23010.js      422.49 KiB        131.86 KiB
  dist/js/app.7c82e299.js                7.65 KiB          2.82 KiB
  dist/js/about.3a94e576.js              0.44 KiB          0.31 KiB
  dist/css/chunk-vendors.f1000a76.css    171.00 KiB        24.30 KiB
  dist/css/app.03795e02.css              0.53 KiB          0.31 KiB

I found another thread mentioning build size and it mentioned something about “esm” builds and I tried using a different import, but barely any difference:

//import BootstrapVue from "bootstrap-vue/dist/bootstrap-vue.esm.min";

Any suggestions? Thanks.

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 19 (7 by maintainers)

Most upvoted comments

Try this:

import Vue from 'vue'

import Badge from 'bootstrap-vue/es/components/badge'
import Breadcrumb from 'bootstrap-vue/es/components/breadcrumb'
import Button from 'bootstrap-vue/es/components/button'
// ...
import Tabs from 'bootstrap-vue/es/components/tabs'

Vue.use(Badge)
Vue.use(Breadcrumb)
Vue.use(Button)
// ...
Vue.use(Tabs)

This should treeshake better.

Also note that Webpack 4 typically only treeshakes in production mode (https://webpack.js.org/guides/tree-shaking/#conclusion)

tmorehouse on Feb 18, 2019

@tmorehouse Thank you, you are my hero of the day! 💋

Now its only 163KB

(I create the webpack analyzer reports with nuxt build -a, quick and easy and in production mode by default)

pimlie on Feb 18, 2019

PS: Next release has side-effects field which can potentially allow using import { } from ... syntax. (#2268)

pi0 on Feb 5, 2019

I shouldn’t have to do this

@cliffordh Why?

BootstrapVue when used project-wide, cannot predict what components are going to be used on runtime. I’m working on nuxt module improvement to make it as easy as declaring needed components via nuxt.config, which can be easily used for a VueCLI plugin too.

pi0 on Feb 5, 2019

Try importing like this:

import Navbar from 'bootstrap-vue/es/components/navbar'
Vue.use(Navbar)

hertz1 on Feb 5, 2019