合并、壓縮檔主要有2方面的問題：
1. 每次發布的時候需要運行一下自己寫的bat檔案或者其他程式把檔案按照自己的配置合并和壓縮。
2. 因生產環境和開發環境需要載入的檔案不一樣，生產環境為了需要載入合并、壓縮後的檔案，而開發環境為了修改、調試方便，需要載入非合并、壓縮的檔案，所以我們常常需要在JSP中類似與下面的判斷代碼： 複製代碼 代碼如下:<c:if test="${env=='prod'}">
<script type="text/javascript" src="/js/all.js"></script>
</c:if>
<c:if test="${env=='dev'}">
<script type="text/javascript" src="/js/1.js"></script>
<script type="text/javascript" src="/js/2.js"></script>
<script type="text/javascript" src="/js/3.js"></script>
</c:if>
緩衝問題：在現在JS滿天飛的時代，大家都知道緩衝能帶來的巨大好處，但緩衝確實非常麻煩的一個問題，相信很多人曾經曆過下面的情況：為了讓程式更快，在伺服器上為JS加上緩衝5天的代碼，但產品更新後第二天就接到電話說系統出錯，詳細瞭解後就發現是緩衝引起的，讓使用者刪除緩衝後就會OK。原因很簡單，就是你JS已經修改了，但使用者還在使用緩衝中的老JS。在經曆幾次這種情況，被領導數落了幾次後。沒辦法只能把JS的緩衝去掉，或者改成8個小時。可這樣就完全失去了緩衝的優勢了，哪我們到底需要解決哪些問題才能讓我們使用緩衝順心如意了？
1. 如何在修改了某個JS後，自動把所有引用該JS頁面的代碼中加上1個版本號碼？
2. 該如何產生版本號碼，根據什麼來產生這個版本號碼。
可能有人為瞭解決上面的緩衝問題，寫了個JSP標籤，通過標籤讀取JS、css檔案的修改時間來作為版本號碼，從而來解決上面2個問題。但這種方法有下面幾個缺點：
1. 每次請求都要通過標籤讀取讀取檔案的修改時間，速度慢。當然你可以把檔案的修改時間放到緩衝中，這樣也會加到了記憶體使用量量。
2. 在HTML靜態頁面中用不了
3. 如果你們公司是如下的部署發布方式(我們公司就是這樣)，則會失效。每次發布，不是直接覆蓋之前的WEB目錄，營運的為的發布方便，要求每次發布直接給他們1個war包，他們會把之前WEB目錄整個刪除，然後上傳現在的war包，這樣就導致程式運行後，所有檔案的最後修改時間都是解壓war的時間。
分享自己項目中的處理方案：
為瞭解決上面討論過的問題，在下寫了1個如下的組件，組件中根據我們自己的實際情況使用了檔案大小來做為檔案的版本號碼，雖然在檔案修改很小(比如把字元a改成b)，可能檔案大小並沒有變，導致版本號碼也不會變。
但這種機率還是非常低的。當然如果你覺的使用檔案修改時間作為版本號碼適合你，只需要修改一行代碼就行，下面看下這個組件的處理流程(本來想用流程圖表達，最後還是覺的文字來的直白寫)：
1. 程式啟動(contextInitialized)
2. 搜尋程式目錄下的所有merge.txt檔案，根據merge.txt檔案的配置合并檔案, merge.txt檔案執行個體如下：
# 檔案合并設定檔,多個檔案以|隔開，以/開頭的表示從根目錄開始,
# 空格之後的檔案名稱表示合并之後的檔案名稱
# 把1,2,3合并到all檔案中
1.js|2.js|3.js all.js
#合并CSS
/css/mian.css|/css/common.css all.css
3. 搜尋程式目錄下所有JS，CSS檔案(包括合并後的)，每個檔案都壓縮後產生對應的1個新檔案。
4. 搜尋程式目錄下所有JSP,html檔案，把所有JS,css的引用代碼改成壓縮後並加了版本號碼的引用。
執行個體：
執行個體的檔案結構如：
看JSP原始代碼(程式運行前)： 複製代碼 代碼如下:<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<% boolean isDev = false; // 是否開發環境%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<% if(isDev){ %>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/1.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/2.js"></script>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/1.css" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2.css" />
<% }else{ %>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/all.js"></script>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all.css" />
<% } %>
</head>
<body>
<h1 class="c1">Hello World!</h1>
</body>
</html>
程式運行後JSP的代碼： 複製代碼 代碼如下:<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
boolean isDev = false; // 是否開發環境
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<% if(isDev){ %>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2-3gmin.js?99375"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/1-3gmin.js?90"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/2-3gmin.js?91"></script>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/1-3gmin.css?35" />
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/2-3gmin.css?18" />
<% }else{ %>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/jquery-1.4.2-3gmin.js?99375"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/all-3gmin.js?180"></script>
<link type="text/css" rel="stylesheet" href="<%=request.getContextPath() %>/css/all-3gmin.css?53" />
<% } %>
</head>
<body>
<h1 class="c1">Hello World!</h1>
</body>
</html>
加3gmin尾碼的檔案全部是程式啟動時自動產生的。
執行個體下載：猛擊此處下載
PS：自己的設計的處理方案並沒有解決"需要JSP中加判斷代碼的問題"，主要是因為還沒有找到什麼好的辦法去自動刪除1.js,2.js,3.js的3個引用，而插入1個新的all.js的引用，如果那位同學對解決這個問題有好的想法，請不吝賜教。
如果有同學想使用這個組件，建議在測試環境下運行一次後，把修改後的程式直接上傳到正式伺服器上，然後去掉這個功能，不然在伺服器上每次啟動都調用這個功能還是需要花費一些時間和資源的
其實一直想使用SVN中的版本號碼來控制緩衝，這個是最嚴謹的一個方法，但也因為做起來太複雜，所以一直也沒做起來，以後以後有時間可以再研究。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
