CSS JS 修改後不會生效？ 小技巧避免被瀏覽器 CACHE

最近開發專案，遇到這個惱人小問題：

每每修改 CSS code 或 javascript 檔案，網頁一刷新，還是不動如山啊！ 😡 

實驗後，原來是遇到 CACHE 快取問題，這部分與使用者瀏覽器有關：

Google Chrome、safari  對此 CACHE 機制各不同，然後，Wordpress 與此 CACHE 機制也有關，

簡直是一個大混亂的局面。

那該怎麼辦呢？

若想短時間內解決此問題，有個簡單方法。 🙂

在每次引用 CSS 與 javascript 檔之處，加上一個 ?v=亂數 的機制：

以PHP 為例，

<link rel="stylesheet" type="text/css" href="http://mysite/style.css”>

 
利用 time() 函數，產生一組每次都不一樣的 unix timestamp 數字：

<link rel="stylesheet" type="text/css" href="http://mysite/style.css?v=<?=time()?>">

 

如此一來，每次瀏覽器刷新，一定都會重新抓取該檔案，不會再卡住快取了。

 

注意： 這方法用於開發期間，一旦系統正式上線服務後，建議關掉該亂數。

畢竟，js CSS 檔只要抓一次就夠了，每次重新抓取，意味耗掉時間與資源。