前端资源缓存与版本号更新

作者：JAY 2017-05-08

为了实现前端资源的缓存和快速访问，通常会开启服务端的Gzip压缩，并使用CDN实现静态资源的缓存。虽然提高了加载速度，但如果缓存更新不及时，就会导致Bug。最有效的解决方案是，修改资源文件的同时更新页面中引用的路径，让浏览器主动放弃缓存，加载新资源。

一般会使用两种方式解决，方案一是覆盖式发布，不改变文件名，只在链接后添加版本号，如下：

src="../js/index.js?v=1.0.0"
src="../js/index.js?v=1.0.1"

方案二是非覆盖式发布，生成一个新的资源文件，如下：

src="../js/index_n12bn21.js"
src="../js/index_1ceno23.js"

CSS和图片也与此类似。方案二部署显然会比方案一多出许多冗余的文件，但事实上，流量大的公司都会采用方案二，为什么呢？

不管是哪种代码发布方式，在发布代码的时候总有先后顺序，哪怕这个时间差非常非常短，但也会导致在这这很短的时间，内出现页面和资源文件不匹配的问题，如下图：

201705121494550183259989.jpg

非覆盖式发布就是为了解决以上问题。先上资源代码，然后更新页面文件，用户只要加载了新的页面文件，就会调用新的资源，避免了上线过程中的报错，再也不需要加班到半夜等待访问低峰期再上代码。


自动添加版本号的方式，可以用PHP获取文件修改时间戳的方式实现，代码如下：

 function AutoVersion( $file ) {
	if( file_exists($_SERVER['DOCUMENT_ROOT'].$file) ) {
		$ver = filemtime($_SERVER['DOCUMENT_ROOT'] . $file); 
	} else {
		$ver = 1;
	}
	return $file .'v=' .$ver;
}

也可以使用FIS之类的资源定位系统，这里不展开讨论。

但我更推荐用纯前端的方式实现。覆盖方案有一个gulp插件“gulp-asset-version”，中文文档在我另一篇博客（点此访问）。非覆盖方案推荐的是“gulp-rev”和“gulp-rev-collector”，因为这两个插件太流行，这里就不多做介绍。


总结一下：


本文未经许可禁止转载，如需转载请联系 JAY@oonne.com

TOP