Tree Shaking (feature request)

Bootstrap has a ton of CSS classes that aren’t used all the time.

I’d love to see a feature in Bootstrap Studio that only takes utlizied classes and writes them to a separate file.

For some of my one page brochures, I can literally go from 183 KB to 2 KB for the stylesheet.

P.S. I had to put in “(feature request)” in the title because “tree shaking” was only 12 characters, LOL.

We generally prefer not to modify Bootstrap, because this would break the CDN export option (it won’t be possible to use a CDN if your Bootstrap CSS differs from the one on the CDN). But we would love to hear what other users think of a potential “cleanup” of Bootstrap during export.

The only opinion I have on it is that if it were to be implemented, it would have to be done awesomely to be useful, which is going to create more work for the team as the code evolves and so on.

@martin I’d suggest giving people the option to duplicate stock bootstrap.min.css file. Then they can go in and disable unused classes, and on export, the file will only contain the classes they want. It would be the user editing bootstrap.min.css (at their own risk) not you guys.

1 Like

There are existing tree shaking modules so they don’t have to code from scratch.

I’d have to +1 @printninja’s comment on giving us the ability to do it for ourselves. That does take us back to the situation of needing more control for those of us that know not to break it. Not saying I won’t break it lol, just that it’s less likely and I’ve got a head on my shoulders enough to keep backups … usually … looks around innocently :stuck_out_tongue:

Sounds great in theory, but the update situation is going to be a problem. It is not clear when a new version of Bootstrap is released how people will update their customized framework.

Until we figure out how to do it, copying the block to your stylesheet and modifying it is the best option.

Yeah, and other than us not having direct access to at least “see” the full files within the app (can view them in any editor) we should be doing it that way anyways. In my practice anyways, I never edit default code, only copy over to a custom file, doesn’t matter what kind of code it is. So that part is all good.

You can customize and optimize bootstrap 5 how you want. Read the documents at getbootstrap.
Here is an example with an optimized bootstrap.min.css only 7Kb.

Link doesn’t work Kuli,

The thing on this is not that we cannot edit it, it’s that we cannot do so within the BSS app. In other words we’d have to do it externally and then the upkeep of it etc … too much work for my taste lol.

There is a reason why I upload examples to the BSS hosting, then you must edit all within the bss app.
I don’t know why the link doesn’t work for you, it work in chrome, firefox and edge on windows

It seems it would be fairly straightforward to implement.

  1. Parse the HTML for all classes.
  2. Search for these classes in Bootstrap CSS.
  3. Write them out to a separate file.

But maybe I don’t quite understand all the complexities. And I suspect tree shaking for JS may be more difficult.

It’s working now Kuli, thanks :slight_smile:

Kuli’s link goes to a YouTube video when I click it.

Yep for me too now. Advertisement for the Email program coming soon.

The example was a YouTube clone with more than 1000 videos. If you had explored the example and clicked on a video on the right side which was categories, then the video would have started to play in the big iframe on the left side and the categories on the right side would have been updated with videos from that category . The categories was Music, HTML, CSS, Sass,Javascript and Photography. Each category had sub categories from beginners to advanced.

Today the example is the Grayscale version 2 template from Start Bootstrap with a customize and opitimized bootstrap.min.css

which gives this result on PageSpeed Insights

I created more or less the same request the other day - looks like I was late to the party.

If it could be done, this feature would be perfection. In my request, I suggest ticking what is wanted, rather than an auto-detect. Perhaps this is easier to implement? Also, I’m often using BSS to create bits and pieces and paste them into an existing site or add on to what I’ve done, so by using a checkbox method, I can basically know what the site will use now or in the future, and then be able to paste sections or pages in later. More significantly, I know which features I’d never use, so I can exclude them safely. Future proofing, essentially.

But anything that captures the gist of the request would be perfection…Page speeds are starting to require micro management…