前端开发静态文件自动添加版本号解决方案
最新开个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$
结果资源看看如何实现利用版本号自动添加,这样就不会出现服务器重启,文件内容没有改变,但是版本号发生了改变,导致客户端需要重新发送请求。
由最代码官方编辑于2016-6-18 10:25:24
猜你喜欢
- html实战-制作静态网页
- html5静态网站模板下载
- mybatis基本文件dao、model、xml、mapper自动生成java工具
- java自动解析pom文件生成module.xml
- soku的html静态页面模板
- 网上书店静态网站模板
- 很多网站的静态页面模板
- maven+mybatis+通用mapper自动生成java实体类,映射接口与映射文件
- spring mvc 结合 urlrewrite实现伪静态化的demo实例
- struts2 urlrewrite伪静态配置教程源代码下载
- 使用Urlrewrite技术实现Struts2+Hibernate3+Spring的项目的伪静态
- java伪静态的urlrewrite,支持二级域名
- 一款简单的css前端开源框架Kube 现在最新版本就是5.0
- 证 前端响应式布局css3框架media queries demo实例
- 原证精 超棒的vue前端开发框架vue-admin-beautiful搭建运行实例
- javascript简易的前端页面调试小工具
- 原证精 bootstrap+dhtmlxSchedule实现的预约模块前端源代码
- 原证 适合前端小白练手的布局页面html+css+js
- 证 amazeui实现支付前端模板
- 证 企业网站建站前端模板
- 证 layui个人博客前端模板
- 【猪猪-前端】前端Login高质量Demo集合,下载即可查看,前端开发必备。
- 原证 jquery通过cookie和localStorage实现前端数据交互
- jQuery UI前端开源WEB框架B-JUI下载