Resource Versioning for CSS and JS, Cache Busting

I would like bootstrap studio to add a query string to css and js resources based on a checksum of the file.

Not only does this side step "clear your browser cache and refresh the page" issues with customers and reviewers. In production, it ensures caching proxies and services like Cloudflare serve the most current version of the file while still providing the benefits of caching.

Like some of my other tools, I would suggest using an MD5 hash because its relatively short and very rare not to pick up on single byte changes. The query string could be anything but I would also suggest using name=value pairs instead of just a value after the query string. Some services, software, or configurations may discard them otherwise.

The format would be:

url = filePath + '?id=' + hash;

A final example with a real hash would be:

link href="/css/app.css?id=ab13550e6059dee68fe5" rel="stylesheet"

A number of tools have standardised on "id" as the name attribute. It's short. Might even be a standard.

I'd really like to second this - this is causing me quite a few issues currently and I'm having to manually edit the files after export - would be great if bss could do this

+1 on this suggestion

Thank you for this suggestion! This would indeed be a nice option to have. We can add it to the Export tab, under the Advanced section. It will be off by default and persisted as a setting for the design.

I am not sure about the "id" parameter though. Did a quick search to see which parameter is most frequently used and didn't see a definitive answer. I would personally go with "hash" or "h" like this: https://example.com/assets/css/styles.css?h=abc2123f...

1 Like

That would be great news, thank you!

You're right. I'm wrong about the "id" attribute. I think i meant to write "v" but had something else on my mind at the time. Of course, "h" would be even better.

That would be fantastic!

Just wanted to say I'm loving this option you have added in 4.3, thanks very much!