[ASP.NET MVC] Cache CSS and JS files

Question

Hi all,

When I refresh my website in less than 2-3 minutes, Firebug shows these nice requests:

1. /core.css          304 Not modified
2. /core.js           304 Not modified
3. /background.jpg    304 Not modified

BUT when I refresh after >3 minutes, I get:

1. /core.css          200 OK
2. /core.js           200 OK
3. /background.jpg    304 Not modified

Why my CSS and JS files are downloaded again and images aren't?

I'm using ASP.NET MVC 3, I DON'T use [OutputCache], and in my /Content folder (where all css, js and img files live in subfolders) I have this Web.config:

<configuration>
    <system.webServer>
        <staticContent>
            <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="1.00:00:00" />
        </staticContent>
    </system.webServer>
</configuration>

which sets HTTP header Cache-Control: max-age=86400 ONLY. So basically CSS, JS and images are treated the same way, but somehow CSS and JS don't get cached for a longer period... why is that?

Answer 1

This occurs with IIS or with the Visual Studio web server? for some time perceived this behavior while developing (using the VS web server), but when publish it in IIS this not occur anymore.

Answer 2

Could this be the bug in Firefox described here ?

You could test this by opening the same page in another browser and check what get's loaded using Fiddler or some other tool.

Answer 3

Hopefully this will help: http://www.iis.net/ConfigReference/system.webServer/staticContent/clientCache