为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重写来解决，关于伪静态也比较简单，这里就不赘述了。