CakePHP and .htaccess Asset Caching

Question

I am still pretty new to CakePHP and am having trouble figuring out how to optimize asset caching.

Back when I still coded in pure PHP, this is what I would do with my .htaccess and header.inc.php files:

.htaccess:

<IfModule mod_rewrite.c>
    # Turn the rewrite engine on

    RewriteEngine On

    # The following rewrite rule makes it so that if a URL such as
    # http://example.com/css/style.1291314030.css is requested
    # then it will actually load the following URL instead (if it exists):
    #
    # http://example.com/css/style.css
    #
    # This is to increase the efficiency of caching. See http://bit.ly/9ZMVL for
    # more information.

    RewriteCond %{DOCUMENT_ROOT}/$1/$2.$3 -f
    RewriteRule ^(css|js)/(.*)\.[0-9]+\.(.*)$ /$1/$2.$3 [L]
</IfModule>

<IfModule mod_expires.c>
    # Optimize caching - see http://yhoo.it/ahEkX9 for more information.

    ExpiresActive On

    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 month"
    ExpiresByType text/css "access plus 1 year"
    ExpiresByType application/javascript "access plus 1 year"
    ExpiresByType application/x-javascript "access plus 1 year"
</IfModule>

header.inc.php:

foreach ($css_to_use as $current_css)
{
    echo "\n\t\t<link rel=\"stylesheet\" type=\"text/css\" href=\"css/$current_css." . filemtime("{$_SERVER['DOCUMENT_ROOT']}/css/$current_css.css") . ".css\">";
}

This setup worked quite well because when I worked on client websites, I never had to tell the client to perform a hard refresh or clear their cache; it was totally automatic and still had the benefits of caching.

I see that in CakePHP's "app/config/core.php" file, one can use this line of code:

Configure::write('Asset.timestamp', 'force');

However, that only makes the URLs look like this:

<link rel="stylesheet" type="text/css" href="/css/style.css?1291314030" />

So it doesn't work the way I'd like it to. What is the best way to achieve asset caching?

Thanks!

Answer 1

Appending a query string is effectively the same as changing the url, browsers will consider it different and reload the asset, be it CSS, images or anything else.

Answer 2

Step 1: Change your webroot .htacess to this

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Step 2: sudo a2enmod expires

Step 3: sudo service apache2 restart

Step 4: Drink a beer, life is good.