Web靜態資源處理方案
阿新 • • 發佈:2019-02-18
1. 背景說明
由於前端頁面使用到了iframe,經常會出現JS/CSS更新之後,頁面無法自動重新整理以及按F5也無法重新整理的問題,需要點選“重新載入框架”才能成功重新整理頁面。這會影響普通使用者的使用。
2. 解決方案
問題原因,iframe快取了靜態資原始檔,在F5重新整理時並不會重新整理iframe中的快取。
解決思路,在每次釋出時,修改靜態資源的路徑,使得訪問新版本的頁面時一定去下載新的資原始檔。
3. 具體實現
1) 引入版本號的概念,在每次釋出時修改版本號的資訊。
注意:這裡VERSION設定為空,表示使用不帶版本號的resources 2) 將版本號資訊通過攔截器注入到每個頁面
######當前版本號
#VERSION=1_0_20161010_1
VERSION=
注意:這裡VERSION設定為空,表示使用不帶版本號的resources 2) 將版本號資訊通過攔截器注入到每個頁面
3) 頁面在引用靜態資源時,新增版本號資訊到resources資料夾後面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()); } } }
在這套方案搭建完成後,這是開發過程中唯一需要處理的地方。 4) 建立啟動時載入的servlet,來複制靜態資源到新的帶版本號的路徑中<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>
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>
這樣,在每次釋出時,只需要修改版本號,即可實現靜態資源連結的更新。