search

simplise / use-bootstrap

https://usebootstrap.org/
50 stars 4 forks source link

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

Open dagnelies opened 2 months ago

dagnelies commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

Potential issues that may be affecting

https://github.com/vueuse/vueuse/issues/469

dagnelies commented 2 months ago

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 commented 2 months ago

https://github.com/simplise/use-bootstrap/issues/44

KoujiSano commented 2 months ago

https://github.com/simplise/use-bootstrap/issues/45

KoujiSano commented 2 months ago

https://github.com/simplise/use-bootstrap/issues/46

KoujiSano commented 1 month ago

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