存在的問(wèn)題：
合并、壓縮文件主要有2方面的問(wèn)題：
1. 每次發(fā)布的時(shí)候需要運(yùn)行一下自己寫(xiě)的bat文件或者其他程序把文件按照自己的配置合并和壓縮。
2. 因生產(chǎn)環(huán)境和開(kāi)發(fā)環(huán)境需要加載的文件不一樣，生產(chǎn)環(huán)境為了需要加載合并、壓縮后的文件，而開(kāi)發(fā)環(huán)境為了修改、調(diào)試方便，需要加載非合并、壓縮的文件，所以我們常常需要在JSP中類(lèi)似與下面的判斷代碼：
復(fù)制代碼 代碼如下:
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>
緩存問(wèn)題：在現(xiàn)在JS滿(mǎn)天飛的時(shí)代，大家都知道緩存能帶來(lái)的巨大好處，但緩存確實(shí)非常麻煩的一個(gè)問(wèn)題，相信很多人曾經(jīng)歷過(guò)下面的情況：為了讓程序更快，在服務(wù)器上為JS加上緩沖5天的代碼，但產(chǎn)品更新后第二天就接到電話說(shuō)系統(tǒng)出錯(cuò)，詳細(xì)了解后就發(fā)現(xiàn)是緩存引起的，讓用戶(hù)刪除緩存后就會(huì)OK。原因很簡(jiǎn)單，就是你JS已經(jīng)修改了，但用戶(hù)還在使用緩存中的老JS。在經(jīng)歷幾次這種情況，被領(lǐng)導(dǎo)數(shù)落了幾次后。沒(méi)辦法只能把JS的緩沖去掉，或者改成8個(gè)小時(shí)。可這樣就完全失去了緩存的優(yōu)勢(shì)了，哪我們到底需要解決哪些問(wèn)題才能讓我們使用緩沖順心如意了？
1. 如何在修改了某個(gè)JS后，自動(dòng)把所有引用該JS頁(yè)面的代碼中加上1個(gè)版本號(hào)？
2. 該如何生成版本號(hào)，根據(jù)什么來(lái)產(chǎn)生這個(gè)版本號(hào)。
可能有人為了解決上面的緩存問(wèn)題，寫(xiě)了個(gè)JSP標(biāo)簽，通過(guò)標(biāo)簽讀取JS、css文件的修改時(shí)間來(lái)作為版本號(hào)，從而來(lái)解決上面2個(gè)問(wèn)題。但這種方法有下面幾個(gè)缺點(diǎn)：
1. 每次請(qǐng)求都要通過(guò)標(biāo)簽讀取讀取文件的修改時(shí)間，速度慢。當(dāng)然你可以把文件的修改時(shí)間放到緩存中，這樣也會(huì)加到了內(nèi)存使用量。
2. 在HTML靜態(tài)頁(yè)面中用不了
3. 如果你們公司是如下的部署發(fā)布方式(我們公司就是這樣)，則會(huì)失效。每次發(fā)布，不是直接覆蓋之前的WEB目錄，運(yùn)維的為的發(fā)布方便，要求每次發(fā)布直接給他們1個(gè)war包，他們會(huì)把之前WEB目錄整個(gè)刪除，然后上傳現(xiàn)在的war包，這樣就導(dǎo)致程序運(yùn)行后，所有文件的最后修改時(shí)間都是解壓war的時(shí)間。
分享自己項(xiàng)目中的處理方案：
為了解決上面討論過(guò)的問(wèn)題，在下寫(xiě)了1個(gè)如下的組件，組件中根據(jù)我們自己的實(shí)際情況使用了文件大小來(lái)做為文件的版本號(hào)，雖然在文件修改很小(比如把字符a改成b)，可能文件大小并沒(méi)有變，導(dǎo)致版本號(hào)也不會(huì)變。
但這種機(jī)率還是非常低的。當(dāng)然如果你覺(jué)的使用文件修改時(shí)間作為版本號(hào)適合你，只需要修改一行代碼就行，下面看下這個(gè)組件的處理流程(本來(lái)想用流程圖表達(dá)，最后還是覺(jué)的文字來(lái)的直白寫(xiě))：
1. 程序啟動(dòng)(contextInitialized)
2. 搜索程序目錄下的所有merge.txt文件，根據(jù)merge.txt文件的配置合并文件, merge.txt文件實(shí)例如下：
# 文件合并配置文件,多個(gè)文件以|隔開(kāi)，以/開(kāi)頭的表示從根目錄開(kāi)始,
# 空格之后的文件名表示合并之后的文件名
# 把1,2,3合并到all文件中
1.js|2.js|3.js all.js
#合并CSS
/css/mian.css|/css/common.css all.css
3. 搜索程序目錄下所有JS，CSS文件(包括合并后的)，每個(gè)文件都?jí)嚎s后生成對(duì)應(yīng)的1個(gè)新文件。
4. 搜索程序目錄下所有JSP,html文件，把所有JS,css的引用代碼改成壓縮后并加了版本號(hào)的引用。
實(shí)例：
實(shí)例的文件結(jié)構(gòu)如下圖：
看JSP原始代碼(程序運(yùn)行前)：
復(fù)制代碼 代碼如下:
%@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; // 是否開(kāi)發(fā)環(huán)境%>
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>
程序運(yùn)行后JSP的代碼：
復(fù)制代碼 代碼如下:
%@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; // 是否開(kāi)發(fā)環(huán)境
%>
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后綴的文件全部是程序啟動(dòng)時(shí)自動(dòng)生成的。
實(shí)例下載：猛擊此處下載
PS：自己的設(shè)計(jì)的處理方案并沒(méi)有解決"需要JSP中加判斷代碼的問(wèn)題"，主要是因?yàn)檫€沒(méi)有找到什么好的辦法去自動(dòng)刪除1.js,2.js,3.js的3個(gè)引用，而插入1個(gè)新的all.js的引用，如果那位同學(xué)對(duì)解決這個(gè)問(wèn)題有好的想法，請(qǐng)不吝賜教。
如果有同學(xué)想使用這個(gè)組件，建議在測(cè)試環(huán)境下運(yùn)行一次后，把修改后的程序直接上傳到正式服務(wù)器上，然后去掉這個(gè)功能，不然在服務(wù)器上每次啟動(dòng)都調(diào)用這個(gè)功能還是需要花費(fèi)一些時(shí)間和資源的
其實(shí)一直想使用SVN中的版本號(hào)來(lái)控制緩存，這個(gè)是最嚴(yán)謹(jǐn)?shù)囊粋€(gè)方法，但也因?yàn)樽銎饋?lái)太復(fù)雜，所以一直也沒(méi)做起來(lái)，以后以后有時(shí)間可以再研究。
您可能感興趣的文章:- CSS3 動(dòng)畫(huà)卡頓性能優(yōu)化的完美解決方案
- js中用事實(shí)證明cssText性能高的問(wèn)題
- 微信小程序 扭蛋抽獎(jiǎng)機(jī)css3動(dòng)畫(huà)實(shí)現(xiàn)詳解
- vue操作動(dòng)畫(huà)的記錄animate.css實(shí)例代碼
- Vue中CSS動(dòng)畫(huà)原理的實(shí)現(xiàn)
- 原生JS檢測(cè)CSS3動(dòng)畫(huà)是否結(jié)束的方法詳解
- 微信小程序CSS3動(dòng)畫(huà)下拉菜單效果
- 詳解盒子端CSS動(dòng)畫(huà)性能提升
