How to programmatically invalidate or refresh JavaScript and CSS bundles without restarting the web application?

Question

I understand that when using bundles for JavaScript and CSS the web application is caching the bundles and using a caching key for it, something like the following:

<script src="/bundles/sampleJs?v=h-HGvCLcx-0T1kG3DBKIVBtGxEhtfpONQl5b_7BQuSo1"></script>

How can I programmatically refresh the cached bundles (or just one bundle)?

For example, if I have to upload a new CSS update - I want to update the bundles without having to restart the whole web application...

Answer 1

Here are two ways you can address the issue:

ASP.NET:

If the html page is generated on the server side in let's say ASP.NET, I would simply define a static global in Global.asax that would be appended to all resources.

<script src="/bundles/sampleJs?cacheBustVersion=" + <%= @cacheBustVersion %> ></script>

RequireJS:

In Javascript, if you're using RequireJS you can create a variable called urlArgs in your requirejs config section.

urlArgs: "cacheBustVersion=v1"

This will append "&cacheBustVersion=v1" to each file that's loaded via the require call.

RequireJS during development:

urlArgs: "cacheBustVersion=" Date.now()

This will ensure all files loaded through requireJS are not cached.

RequireJS Documentation for urlArgs