Animation CSS/JS should only be added to pages that use animation

I was recently looking over the source code of a page on a site I’m building and noticed the following was in the page code…

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

The problem is, I had nothing animated on the page. I was pulling my hair out trying to figure out why these were being loaded even though none of the components on the page had animations.

After some experimenting, I discovered that it seems if you use an animation on any page of your site, the animation CSS and JS gets added to every page of the site. Of course this is undesirable since there’s no reason to load assets on a page that aren’t needed. I can’t find any way to prevent this other than manually editing the code after export (maybe it can be done with an export script, but I’m not familiar with writing scripts.)

Temporarily, I can duplicate the site, delete all the pages with animations, and then export the pages I need separately, but this is a cludgy work-around.

Can the devs look into this? @martin @gabby Seems like it shouldn’t be hard to adjust it so BSS only adds the CDNs to pages that used animation.

Thank you for bringing this up! For our next update we plan to rework the way the animations libs are included so both CDN and local versions are supported, and it will be an opportune moment to implement this fix as well.

3 Likes

I’m basically in the same boat on this as a new user of your application.
I do NOT want any code of any kind that is not directly necessary for any specific page.
If I have a self induced error whether it be an html element typo or CSS style or just learning how things are implemented via your prebuilt component code chunks and or applying styles addtributes etc.
I dont’ want any extra bonus code piled in for me to sort out.

I wouldn’t be overly concerned. This is an isolated (and fairly minor) issue that the developers will correct.

Unlike most website builders, Bootstrap Studio produces remarkably clean, 100% semantic code, and zero bloat. The only code you’ll find on your page will be based on what you add.