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.

[tmorehouse]

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)

[pimlie]

@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)