question-mark
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.

Nuxt tree shaking not working

See original GitHub issue

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 image

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

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:30 (19 by maintainers)

github_iconTop GitHub Comments

4reactions
tmorehousecommented, May 17, 2019

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'
    ]
  },
0reactions
tmorehousecommented, May 31, 2019

v2.0.0-rc.22 has been released.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Help to configure the tree shaking · Discussion #10455 - GitHub
Hello community,. I'm trying to find a way to effectively use the tree shaking with nuxtjs. The sideEffect seems to work with no...
Read more >
How can I perform "Tree Shake" in Nuxt config - Stack Overflow
In my Nuxt app I need to treeshake not used Icons from local library. I am following instructions provided on webpack https://webpack.js.org/ ...
Read more >
Treeshaking — Vuetify
Treeshaking will only work with Webpack 4 in production mode. This is automatic when using Vue CLI. # Vuetify-loader. Keeping track of all...
Read more >
Global API Treeshaking breaking - Vue 3 Migration Guide
Vue.nextTick() is a global API exposed directly on a single Vue object – in fact, the instance method $nextTick() is just a handy...
Read more >
Getting Started - BootstrapVue
Note: Optimal tree shaking only works when your Nuxt.js app is in production mode. You may notice larger bundle sizes when not in...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found