Fabio Marzocca Fabio Marzocca - 5 months ago 27
Javascript Question

What is the best practice to edit .js and .css files and avoid caching during development?

I often need to edit my scripts (js) and styles (css) in my web app, but they are getting cached so the website does not reflect the changes. Even deleting each time the browser cache does not fix the problem. I have to change the filename (for js or css) every time in order to get the changes displayed, but this is really annoying.

I am sure I am missing some point here. Could you pls suggest?

Thanks

Answer Source

Refreshing the page should do the trick in any browser. However, if the JavaScript/CSS files are linked in a portion of the page that is loaded dynamically, that can be a bit tricky. You can append a parameter to the file name. This is not an ideal solution, but it can solve the problem:

<script type="text/javascript" src="/myscript.js?i=123"></script>

Now, you'll have to change the value of the parameter each time. To do that, you'll have to link the file using JavaScript. Something like:

<script>document.write("<script type='text/javascript' src='/myscript.js??v=" + Date.now() + "' /><\/script>");</script>