Tree-shaking?

We can import individual components, as per https://github.com/cdmoro/bootstrap-vue-3/issues/188. But if you do this, it still seems to pull in all the code, which defeats the purpose.

I have this plugin in a Nuxt3 proof of concept app:

import BButton from 'bootstrap-vue-3'
import BNotice from 'bootstrap-vue-3'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(BButton)
  nuxtApp.vueApp.use(BNotice)
})

If I then build this and check what code is flowing over the wire, I can see BTable, BToast, and all the other stuff that I’m not using, and Lighthouse warns me about unused code.

I’m not knowledgeable enough in this area to identify why this might be happening, but I wonder if it is related to the TODO In BootstrapViewOptions.

[messenjer]

For the tree-shaking we need to define correctly the sideEffect in the package.json

For the moment, there are none : https://github.com/cdmoro/bootstrap-vue-3/blob/main/package.json

We should take inspiration from the vue-bootstrap : https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/package.json#L53

  "sideEffects": [
    "**/*.css",
    "**/*.scss",
    "**/*.vue",
    "./docs",
    "./types"
  ],

And read this also : https://www.smashingmagazine.com/2021/05/tree-shaking-reference-guide/

[messenjer]

Yes, there is still a lot of work to do. As long as the bootstrap-vue-3 library is not yet SSR ready.

For the moment, I use bootstrap-vue-3 in a SPA, so no SSR issue. With the idea of using it with Nuxt3 when the stable version is released.

In the meantime, I contribute with small PR to improve the Developer eXperience, like build *.d.ts, vitest, nuxt3 modules, deploy of the docs, fix VuePress, …

I think this project has a good approach using components (SFC) written in a simple and readable way. This should make it easy for more developers to contribute.

I see there are discussions about SSR, and different approaches, … I think they will succeed.