bootstrap-vue: Nuxt tree shaking not working

Describe the bug

I’m using BootstrapVue with Nuxt and the tree shaking is not working. In spite of set what components will be used, the bundle contains carousel component for example.

nuxt.config.js

  modules: [
    'bootstrap-vue/nuxt'
  ],
  bootstrapVue: {
    bootstrapCSS: false, // Or `css: false`
    bootstrapVueCSS: false, // Or `bvCSS: false`
    directivePlugins: ['VBScrollspyPlugin'],
    components: [
      'BLink',
      'BRow',
      'BCol',
      'BContainer',
      'BJumbotron',
      'BImg',
      'BImgLazy',
      'BNavbar',
      'BNavbarNav',
      'BNavbarBrand',
      'BNavbarToggle'
    ]
  },

bundle analyzer

Expected behavior

The main bundle should contain only components that I set.

Versions

Libraries:

BootstrapVue: 2.0.0-rc.20
Bootstrap: 4.3.1
Nuxt: 2.7.1

Environment:

Device: PC
OS: W10
Browser: Chrome
Version: 74

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 1
Comments: 30 (19 by maintainers)

Commits related to this issue

feat(es): don't transpile import/export statements to require/eports The `/es` modules directory is typically used via `import` statements, and hence shouldn't need to be transpiled for interop wit... — committed to bootstrap-vue/bootstrap-vue by tmorehouse 5 years ago
feat(es build): don't transpile import/export statements to require/exports, for better tree shaking (closes #3323) (#3358) — committed to bootstrap-vue/bootstrap-vue by tmorehouse 5 years ago
feat(es): revert to tranforming `es/` modules into CJS, and simplify build with top-level named import/exports (closes #3397, #3393, #3323) (#3404) — committed to bootstrap-vue/bootstrap-vue by tmorehouse 5 years ago

Most upvoted comments

Hmmm it appears webpack isn’t tree shaking based on the named exports (which is should)

IF you import just the plugins, do you see a similar effect:

  modules: [
    'bootstrap-vue/nuxt'
  ],
  bootstrapVue: {
    bootstrapCSS: false, // Or `css: false`
    bootstrapVueCSS: false, // Or `bvCSS: false`
    directivePlugins: ['VBScrollspyPlugin'],
    componentPlugins: [
      'LinkPlugin', 'LayoutPlugin', 'JumbotronPlugin', 'ImagePlugin', 'NavbarPlugin'
    ]
  },

tmorehouse on May 17, 2019