Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Tree-shaking bootstrap-vue with webpack

See original GitHub issue

Probably the fault is not related to bootstrap-vue but just to ask:

I’m using the latest vue-cli with webpack@2.3.3. When I’m running the production build the way it is documented:

import Vue from 'vue'
// ES build is more efficient by reducing unneeded components with tree-shaking.
import BootstrapVue from 'bootstrap-vue/dist/bootstrap-vue.esm';
Vue.use(BootstrapVue);

it is not being TreeShaken and the whole bootstrap-vue(~52KB) and tether.js(~24KB) is included in the build although I’m using only a Dropdown component.

When I’m importing only the wanted component

import Dropdown from 'bootstrap-vue/lib/components/dropdown.vue

undestandably the build is much smaller.

The question is what should I do in order to have a tree shaken build?

Issue Analytics

State:
Created 6 years ago
Comments:8 (8 by maintainers)

Top GitHub Comments

2reactions

pi0commented, Apr 6, 2017

Will Update docs to remove that banner for now about tree shaking ability 😃)

1reaction

pi0commented, Apr 7, 2017

Just found this: https://vuejs.org/v2/guide/components.html#Async-Components

Top Results From Across the Web

Getting Started - BootstrapVue

Note: Optimal tree shaking only works when webpack 4 is in production mode and javascript minification is enabled. Component groups and directives as...

Tree shaking with Bootstrap 4 and webpack - Volare Software

First, install Bootstrap, along with jQuery and Popper, which Bootstrap relies on. Then install webpack, along with tools to use ES2015+ syntax ...

BootstrapVueArsenic

Extended component library based on BootstrapVue. ... If you are using module bundlers like webpack, rollup.js, ... Tree shaking with Nuxt.js.

bootstrap-vue-loader - npm

A Webpack plugin for automatic BootstrapVue components and directives importing, mainly for treeshaking. Reduce the bundle size and achieve ...

bootstrap-vue vuejs dynamic async component import

So final module bundle after tree-shaking is 1.4MB (entire bootstrap library). BNavbar: () => import('bootstrap-vue').then(module => module.