Browser caching CSS, Javascript file 問題

有時遇到改了css或js，但卻沒反應，除了天兵改錯隻以外，太多是因為browser自己cache住了，有幾個做法可避免

1. ap server處理
   apache可用mod_expires
   

   //1.載入mod_expires.so
   # vi /etc/httpd/conf/httpd.conf
   LoadModule expires_module modules/mod_expires.so  #拿掉註解
   
   //2.config 
   #vi your_app_path/.htaccess
   ExpiresActive on
   ExpiresByType application/javascript "access plus 1 months"
   ExpiresByType image/jpg "access plus 1 month"
   ExpiresByType image/jpeg "access plus 1 month"
   ExpiresByType image/gif "access plus 1 month"
   ExpiresByType image/png "access plus 1 month"
   ExpiresByType text/css "access plus 1 months"

   p.s. 最好搭must-revalidate ，不然cache時間寫太長的要改檔案才會變，不過也是有人測試說不一定有作用...，所以還是利用下面的做法一定有效!
   
2. 利用uri不同，迫使Browser reload
   以前是自己在get參數列加版本or日期
   

   <link type="text/css" href="aaa.css?v=20130526"/ >

   不過每次有更新就得手動更改，實在不是好方法
   看到有人利用file更新日期搭RewriteEngine~ 真是太棒了~
   
   • html載入
     

     <link type="text/css" href="/css/main.<?php echo filemtime('/path/to/css/main.css'); ?>.css" / >
     //會產出 /css/main.1237440708.css

     main.1237440708.css只是虛擬的檔案，此檔並不存在會透過rewrite rule指向main.css，因此還需設定.htaccess
     
   • .htaccess設定
     

     RewriteEngine On
     RewriteRule ^(css|js)/(.*)\.[0-9]+\.(.*)$ /$1/$2.$3 [L]

     p.s. 如果很好學想知道rewrite rule怎麼寫的，可以看Force reload of updated CSS and Javascript files with unique filenames
3. 利用HTML5的cache manifest
   就隨意改一下 cache manifest的內容
   Browser就會自己檢查有沒有新的版本...

References

• Using Apache mod_expires to control browser caching
• Force reload of updated CSS and Javascript files with unique filenames
• Try to avoid "no-cache"