[FeatureRequest] Auto-import only used components / tree-shaking

[dagnelies]

Hi,

Thanks for this nice module.
Currently everything is imported at once, resulting in a significant increase of the produced bundle size.
About ~320kb CSS & 80kB JS to be precise.
It would be nice if only the used components would be added into the bundle.

[KoujiSano]

Hello. Thank you for your feedback.

Since usebootstrap is a full-spec library, its size is large and is expected to increase in the future. However, when building the application with Vite, TreeShaking is executed, so we believe that the final application bundle size will be reduced.

As an option currently available, you can disable functions at the Module level. Although we do not have sufficient documentation yet, the following link may be helpful:

https://usebootstrap.org/lang-en/extend/server/static

Please let me know if my understanding is incorrect. Thank you.

[KoujiSano]

Potential issues that may be affecting

vueuse/vueuse#469

[dagnelies]

Well, I tried that but unfortunately it doesn't change a thing.
Just adding this module increases the bundle size by ~350kb (raw) even if nothing is used, with or without the mentioned option.s

It's easy to check out using your own stackblitz: https://stackblitz.com/~/github.com/simplise/use-bootstrap-static

If you empty the template (to have a blank page) and run npm run generate, you'll have something like:

...
ℹ .nuxt/dist/client/_nuxt/entry.DFomBsMT.css      284.79 kB │ gzip: 43.87 kB     
...
ℹ .nuxt/dist/client/_nuxt/DKJZmJzM.js             211.30 kB │ gzip: 77.92 kB
...

Using the options does not really make a difference.

Now, as a whole, it's not astronomical.
Nevertheless it makes using this "lightweight" lib becoming a larger bundle, than using some relatively big UI frameworks like elements plus, which is "tree-shaking friendly".

It would be neat to actually only include what's needed.

[KoujiSano]

#44

[KoujiSano]

#45

[KoujiSano]

#46

[KoujiSano]

To support raw Bootstrap5 HTML, it is necessary to load the entire Bootstrap5 CSS.

https://usebootstrap.org/lang-en/getting-started/migration#raw_bootstrap_5_html