Web静态资源处理方案

1. 背景说明

由于前端页面使用到了iframe，经常会出现JS/CSS更新之后，页面无法自动刷新以及按F5也无法刷新的问题，需要点击“重新加载框架”才能成功刷新页面。这会影响普通用户的使用。

 

2. 解决方案

问题原因，iframe缓存了静态资源文件，在F5刷新时并不会刷新iframe中的缓存。

解决思路，在每次发布时，修改静态资源的路径，使得访问新版本的页面时一定去下载新的资源文件。

 

3. 具体实现

 

1) 引入版本号的概念，在每次发布时修改版本号的信息。

######当前版本号
#VERSION=1_0_20161010_1
VERSION=

注意：这里VERSION设置为空，表示使用不带版本号的resources

 

2) 将版本号信息通过拦截器注入到每个页面

public class LoginInterceptor implements HandlerInterceptor {

public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler, ModelAndView m)
throws Exception {
if (m != null) {
m.addObject("pwVersion", GlobalProperties.getVersion());
}
}

}

3) 页面在引用静态资源时，添加版本号信息到resources文件夹后面

<link rel="stylesheet" type="text/css" href="resources${pwVersion}/css/index.css" />
<link rel="stylesheet" type="text/css" href="resources${pwVersion}/css/style.css" />
<link rel="stylesheet" type="text/css" href="resources${pwVersion}/css/one.css" />
<script type="text/javascript" src="resources${pwVersion}/js/jquery.js"></script>
<script type="text/javascript" src="resources${pwVersion}/js/common.js"></script>
<script type="text/javascript" src="resources${pwVersion}/js/tool.js"></script>

在这套方案搭建完成后，这是开发过程中唯一需要处理的地方。

 

4) 创建启动时加载的servlet，来复制静态资源到新的带版本号的路径中

public class StartUpServlet extends HttpServlet {

private static final Log LOG = LogFactory.getLog(StartUpServlet.class);

private static final long serialVersionUID = 1L;

@Override
public void init() throws ServletException {
super.init();

copyStaticResources();
}

private void copyStaticResources() {
String realPath = getServletContext().getRealPath("/resources/");
String newPath = getServletContext().getRealPath("/resources" + GlobalProperties.getVersion() + "/");

if (!realPath.equals(newPath)) {
File existResources = new File(realPath);
File destResources = new File(newPath);

if (destResources.exists()) {
FileTool.delDir(newPath, true);
}

if (existResources.exists()) {
try {
FileTool.copy(realPath, newPath, true);
} catch (Exception e) {
e.printStackTrace();
}
}
}
}

}

<servlet>
<description></description>
<display-name>StartUpServlet</display-name>
<servlet-name>StartUpServlet</servlet-name>
<servlet-class>com.szyciov.pw.servlet.StartUpServlet</servlet-class>
<load-on-startup>3</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>StartUpServlet</servlet-name>
<url-pattern>/StartUpServlet</url-pattern>
</servlet-mapping>

 

这样，在每次发布时，只需要修改版本号，即可实现静态资源链接的更新。

http://www.alanzeng.cn/2016/10/web-static-resource-resolution/