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>
这样,在每次发布时,只需要修改版本号,即可实现静态资源链接的更新。
分享到:

发表评论

昵称

沙发空缺中,还不快抢~