自动改变CSS，JS版本

在雅虎工程师，史蒂夫Souders 的高性能网站建设 中，有很多条关于网站性能优化的建议 ,其中第3条建议 您使用树立了一个Expires头的静态文件（图片， CSS和JavaScript ），实施Expires头很简单，在您的.htaccess 的文件，您可以使用下面的代码

#Far Future Expires Header
<FilesMatch "/.(gif|png|jpg|js|css|swf)$">
    ExpiresActive On
    ExpiresDefault "access plus 10 years"
</FilesMatch>

作者指出：

Keep in mind, if you use a far future Expires header you have to change the component’s filename whenever the component changes. At Yahoo! we often make this step part of the build process: a version number is embedded in the component’s filename, for example, yahoo_2.0.6.js.

要生成像yahoo_2.0.6.js可以按照下面的方法：

第一步，建立一些可规则重写的存储模块，一边存储文件的版本号，因此还是在.htaccess的文件中加入下面的代码

#Rules for Versioned Static Files
RewriteRule ^(scripts|css)/(.+)/.(.+)/.(js|css)$ $1/$2.$4 [L]

然后写一个PHP函数来检查文件的最后修改日期，然后将服务器的修改时间作为版本号

<?php
function autoVer($url){$path = pathinfo($url);
$ver = '.'.filemtime($_SERVER['DOCUMENT_ROOT'].$url).'.';
echo $path['dirname'].'/'.str_replace('.', $ver, $path['basename']); }
?>

然后我们可以将这个函数包含到页面中

include($_SERVER['DOCUMENT_ROOT'].'/path/to/autoVer.php');
<link rel="stylesheet" href="<?php autoVer('/css/structure.css'); ?>"
type="text/css" />
<script type="text/javascript" src="<?php autoVer('/scripts/prototype.js'); ?>">
</script> :include($_SERVER['DOCUMENT_ROOT'].'/path/to/autoVer.php');
<link rel="stylesheet" href="<?php autoVer('/css/structure.css'); ?>"
type="text/css" />
<script type="text/javascript" src="<?php autoVer('/scripts/prototype.js'); ?>">
</script>

然后经过解析之后在页面文件看到的HTML代码将会是

<script type="text/javascript" src="/prototype.197993206.js"></script>