前端工程師-高級(jí)WEB網(wǎng)站前端開(kāi)發(fā)JS、CSS的合并壓縮指南

1、.：.；本篇文章主要討論下目前JS,CSS 合并、緊縮、緩存管理存在的一些問(wèn)題，然后分享下本人工程中用到的1個(gè)處置方案，并提供1個(gè)實(shí)例下載。AD： 存在的問(wèn)題：合并、緊縮文件主要有2方面的問(wèn)題：1. 每次發(fā)布的時(shí)候需求運(yùn)轉(zhuǎn)一下本人寫(xiě)的bat文件或者其他程序把文件按照本人的配置合并和緊縮。2. 因消費(fèi)環(huán)境和開(kāi)發(fā)環(huán)境需求加載的文件不一樣，消費(fèi)環(huán)境為了需求加載合并、緊縮后的文件，而開(kāi)發(fā)環(huán)境為了修正、調(diào)試方便，需求加載非合并、緊縮的文件，所以我們經(jīng)常需求在JSP中類(lèi)似與下面的判別代碼：緩存問(wèn)題：在如今JS滿(mǎn)天飛的時(shí)代，大家都知道緩存能帶來(lái)的宏大益處，但緩存確實(shí)非常費(fèi)事的一個(gè)問(wèn)題，置信很多人曾閱歷過(guò)下面

2、的情況：為了讓程序更快，在效力器上為JS加上緩沖5天的代碼，但產(chǎn)品更新后第二天就接到說(shuō)系統(tǒng)出錯(cuò)，詳細(xì)了解后就發(fā)現(xiàn)是緩存引起的，讓用戶(hù)刪除緩存后就會(huì)OK。緣由很簡(jiǎn)單，就是他JS曾經(jīng)修正了，但用戶(hù)還在運(yùn)用緩存中的老JS。在閱歷幾次這種情況，被指點(diǎn)數(shù)落了幾次后。沒(méi)方法只能把JS的緩沖去掉，或者改成8個(gè)小時(shí)。可這樣就完全失去了緩存的優(yōu)勢(shì)了，哪我們究竟需求處理哪些問(wèn)題才干讓我們運(yù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)簽，經(jīng)過(guò)標(biāo)簽讀取JS、css文件的修

3、正時(shí)間來(lái)作為版本號(hào)，從而來(lái)處理上面2個(gè)問(wèn)題。但這種方法有下面幾個(gè)缺陷：1. 每次懇求都要經(jīng)過(guò)標(biāo)簽讀取讀取文件的修正時(shí)間，速度慢。當(dāng)然他可以把文件的修正時(shí)間放到緩存中，這樣也會(huì)加到了內(nèi)存運(yùn)用量。2. 在HTML靜態(tài)頁(yè)面中用不了3. 假設(shè)他們公司是如下的部署發(fā)布方式(我們公司就是這樣)，那么會(huì)失效。每次發(fā)布，不是直接覆蓋之前的WEB目錄，運(yùn)維的為的發(fā)布方便，要求每次發(fā)布直接給他們1個(gè)war包，他們會(huì)把之前WEB目錄整個(gè)刪除，然后上傳如今的war包，這樣就導(dǎo)致程序運(yùn)轉(zhuǎn)后，一切文件的最后修正時(shí)間都是解壓war的時(shí)間。分享本人工程中的處置方案：為理處理上面討論過(guò)的問(wèn)題，在下寫(xiě)了1個(gè)如下的組件，組件中根據(jù)

4、我們本人的實(shí)踐情況運(yùn)用了文件大小來(lái)做為文件的版本號(hào)，雖然在文件修正很小(比如把字符a改成b)，能夠文件大小并沒(méi)有變，導(dǎo)致版本號(hào)也不會(huì)變。但這種機(jī)率還是非常低的。當(dāng)然假設(shè)他覺(jué)的運(yùn)用文件修正時(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)場(chǎng),# 空格之后的文件名表示合并之后的文件名#

5、 把1,2,3合并到all文件中1.js|2.js|3.js all.js#合并CSS/css/mian.css|/css/common.css all.css3. 搜索程序目錄下一切JS，CSS文件(包括合并后的)，每個(gè)文件都緊縮后生成對(duì)應(yīng)的1個(gè)新文件。4. 搜索程序目錄下一切JSP,html文件，把一切JS,css的援用代碼改成緊縮后并加了版本號(hào)的援用。實(shí)例：實(shí)例的文件構(gòu)造如以下圖：看JSP原始代碼(程序運(yùn)轉(zhuǎn)前)：JSPPagescripttype=text/javascriptsrc=/js/jquery-1.4.2.jsscripttype=text/javascriptsrc=/js

6、/1.jsscripttype=text/javascriptsrc=/js/2.jslinktype=text/cssrel=stylesheethref=/css/1.css/linktype=text/cssrel=stylesheethref=/css/2.css/scripttype=text/javascriptsrc=/js/jquery-1.4.2.jsscripttype=text/javascriptsrc=/js/all.jslinktype=text/cssrel=stylesheethref=/css/all.css/HelloWorld!程序運(yùn)轉(zhuǎn)后JSP的代碼：JS

7、PPagescripttype=text/javascriptsrc=/js/jquery-1.4.2-3gmin.js?99375scripttype=text/javascriptsrc=/js/1-3gmin.js?90scripttype=text/javascriptsrc=/js/2-3gmin.js?91linktype=text/cssrel=stylesheethref=/css/1-3gmin.css?35/linktype=text/cssrel=stylesheethref=/css/2-3gmin.css?18/scripttype=text/javascriptsrc=/js/jquery-1.4.2-3gmin.js?99375scripttype=text/javascriptsrc=/