前端开发静态文件自动添加版本号解决方案

Posted yaerfeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发静态文件自动添加版本号解决方案相关的知识,希望对你有一定的参考价值。

原文:前端开发静态文件自动添加版本号解决方案

源代码下载地址http://www.zuidaima.com/share/1802384061877248.htm


最新开个web,对于页面加载速度是一个非常重要的问题。我试着搜索了网上的资源

一、通过获取文件最后修改时间

原理:通过服务器端语言读取文件最后一次修改修改时间,然后将获取的时间作为版本号。

php为例:


<?php
    function AutoVersion( $file ) 
        if( file_exists($_SERVER['DOCUMENT_ROOT'].$file) ) 
            $ver = filemtime($_SERVER['DOCUMENT_ROOT'] . $file);
         else 
            $ver = 1;
        

        return $file .'v=' .$ver;
    
?>

使用:

<link rel="stylesheet" href="<?=AutoVersion('assets/css/style.css')?>" type="text/css" />

如果文件存在,就会生成类似于下面代码:

<link rel="stylesheet" href="assets/css/style.css?v=1367936144322" type="text/css" />

另外,可以考虑将生成的静态html缓存起来,当静态文件通过svn更新时,能过post-commit hooks 执行脚本,更新缓存。

此文地址http://wlog.cn/performance/assets-version.html

 

补充: 上面的函数

filemtime();可以搜索下php.js查看源码。 我一开始试着用js移植到自己web项目中,但是出现问题。考虑到时间,就没有继续尝试下面。 后来我用jsp把上面方法重写了一遍。大家可以参考下

前端

<%
String path = request.getRealPath("/");
String root = request.getContextPath();
%>

<script src="<%= Function.AutoVersion(path,root,"/resources/js/tools/env.js") %>"></script>  

后台写个Function类

public static String AutoVersion(String path, String root, String fileName)
        File file = new File(path,fileName);
            if(file.exists())
                return root+fileName+"?ver="+file.lastModified();            
            else
                return root+fileName+"?ver=1";
            
    

 

虽然可以实现自动化,但是还有有点问题。

比如你服务器重启,虽然js文件内容没有变化,但是版本号也会发生变化。期待各位完善一下

另外大家可能想到利用SVN 或者 CVS版本号添加

我没有用版本工具进行代码开发,但是确实有点难度。

大家可以搜下 CVS 关键字 $Id$ $Date$

结果资源看看如何实现利用版本号自动添加,这样就不会出现服务器重启,文件内容没有改变,但是版本号发生了改变,导致客户端需要重新发送请求。


最代码官方编辑于2014-4-30 16:59:44

以上是关于前端开发静态文件自动添加版本号解决方案的主要内容,如果未能解决你的问题,请参考以下文章

使用gulp自动化打包合并前端静态资源(CSSJS文件压缩添加版本号)

gulp自动化打包及静态文件自动添加版本号

Gulp 给所有静态文件引用加版本号

gulp静态资源构建压缩版本号添加

前端开发缓存问题的解决方案

Gulp构建前端自动化工作流