為js和css文件自動添加版本號

web應用必然要面對緩存問題，無論前台后台都會涉足緩存。特別是對於前端而言，緩存利用的是否得當直接關系到應用的性能。

通常情況下，我們會傾向於使用緩存，因為緩存一方面可以減少網絡開銷，一方面可以減輕服務器的壓力。

但是有些時候緩存也會帶來一些比較詭異的問題，呵呵。關於緩存的文章應該不在少數，不再討論，本文的重點在於為js和css文件自動添加版本號。

這樣做的原因是：首先對於js和css類型的靜態文件設置了緩存機制，當文件被更新時，需要強迫瀏覽器下載修改后的新文件，也就是要更新緩存，而通過為js和css文件增加版本號這樣的方式就可以很好的解決這個問題。

本文是以php腳本為例，其它語言可參考

php腳本的作用是取文件的時間戳作為版本號，這里可以自行定義版本格式

 

View Code PHP

< ?php
/**
 * Add version to the file for cache problem
 * @param string $url to add version
 * @return string
 */
function autoVer($url){
    $ver = filemtime($_SERVER['DOCUMENT_ROOT'].$url);
    echo $url.'?v='.$ver;
}
?>

引用js和css等資源文件時，使用腳本

<link href="<?php autoVer('/path/file.css'); ?>" rel="stylesheet" type="text/css" >
</link>

最終客戶端展現的html頁面內容

<link href="/path/file.css?v=1297503090" rel="stylesheet" type="text/css" />

這里URI不是靜態，可能會造成某些瀏覽器不會進行緩存，可以采用偽靜態配合URL重寫來解決，關於偽靜態也比較簡單，這里就不贅述了。