Smart caching for CSS and JS

(Reposted from Tom's original post at http://hiveminder.blogspot.com/2006/09/smart-caching-for-css-and-js.html)

When working on Hiveminder, we ran across the problem of how to keep the CSS and JS cached by browsers as long as possible but still be updated as soon as it changes.  We wanted to retain the ease of updating the live site, while at the same time not forcing users to clear their caches every time we (frequently) push a CSS or JS update.

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:

1. Squish all the CSS files into one file and all the JS files into another.
2. 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.

Jifty takes care of all of it, using JavaScript::Squish and our new CSS::Squish to squish the files.  We think it's a novel idea that works really well, allowing us the advantages of modular CSS and JS while keeping it efficient in production and easily updatable.