(Reposted from Tom's original post at http://hiveminder.blogspot.com/2006/09/smart-caching-for-css-and-js.html)
The easiest way is to simply change the referenced filename so the browser doesn't have the contents cached. Many sites accomplish this by putting version numbers in the filename. However, that requires manually changing the filename every time, and though it could have worked for Hiveminder, we wanted a general, hands-free solution to the problem for our web framework Jifty.
Our final solution has two parts:
- Squish all the CSS files into one file and all the JS files into another.
- Hash the contents of those files using MD5 and use the resulting digest as the filename.
The advantage of this is that it's totally hands free. Whenever the contents of any of the CSS or JS files change, the resulting digest and therefore filename changes, and the browser picks up the new code. It also slashes the number of HTTP requests by squishing the all the files together into one "virtual" file (the contents of which we can also cache server-side). For good measure, we also gzip the data on the fly if the client accepts it.