使用YUI Compressor壓縮CSS/JS

JS/CSS檔案大，使用者訪問網站的時候需要下載JS/CSS的時間長就會感覺慢，有的甚至由於CSS的檔案而造成頁面初始開啟很淩亂。

我們怎麼提高使用者下載JS/CSS的速度呢？

1、我們無法改變使用者的網路狀況，只有自己網站使用更快的頻寬或者使用更強的伺服器，使使用者訪問我們的時候感覺很快。

2、對JS/CSS檔案進行壓縮，由於檔案較小，使用者下載的時間就很短。

解決方案1，需要花費比較多的money,方案2實現比較簡單，而且效果也明顯。

下面我們介紹使用YUI Compressor進行JS/CSS壓縮

1、下載yuicompressor http://www.julienlecomte.net/yuicompressor/

2、使用ant編譯得到yuicompressor-x.y.z.jar的包，進入yuicompressor-x.y.z目錄運行ant -f build.xml

3、在build目錄下得到yuicompressor-x.y.z.jar的包，使用java -jar yuicompressor-2.4.2.jar in.js -o out.js

看下out.js的源檔案就會發現去掉了注釋空格等資訊。

更多yui compressor的協助請查看 http://www.julienlecomte.net/yuicompressor/README

 

項目中需要對javascript進行打包和壓縮，我選用了yuicompressor

yuicompressor可以壓縮JS和CSS檔案，去除檔案中的無用空格、換行和注釋。大大的減小JS和CSS檔案的體積。

簡單的命令如下

Java代碼

1. java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js table.js  

 

java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js table.js

--type指定要打包的檔案類型，可選的有 js和css
--charset 指定字元集
-o 指定輸出的檔案名稱，如果不指定這個參數將會把壓縮後的內容輸出到命令列上
最後的table.js是要打包的源檔案

不過這樣壓縮有一個缺點，只能一個一個檔案的進行壓縮，所以使用bat進行批處理壓縮

建立一個compresjs.bat檔案，內容如下

Java代碼

1. (dir %1 /aa /b /s | findstr /e /c:"js") >tmp.txt   
2. for /f %%i in (tmp.txt) do java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o %%i.tmp %%i & copy %%i".tmp" %%i & del %%i".tmp"  

 

(dir %1 /aa /b /s | findstr /e /c:"js") >tmp.txtfor /f %%i in (tmp.txt) do java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o %%i.tmp %%i & copy %%i".tmp" %%i & del %%i".tmp"

運行這個bat檔案，會自動尋找本檔案所在目錄下所有子檔案夾中的.js檔案，進行壓縮並覆蓋源檔案。

compresjs.bat使用的方法只是對檔案進行壓縮，如果有10個源檔案，還會壓縮成10個檔案，並沒有進行打包。 我們可以對他進行更進一步的處理，把這10個源檔案打包壓縮成1個檔案，就像ext-all.js那樣。

建立一個packagejs.bat檔案，內容如下

Java代碼

1. for /r ..\WebContent\js %%i in (*.js) do type %%i>>uiiang-debug.js   
2. java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js  

 

for /r ..\WebContent\js %%i in (*.js) do type %%i>>uiiang-debug.jsjava -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js

在packagejs.bat中，先將..\WebContent\js下的所有JS檔案內容合并到uiiang-debug.js檔案中，然後再使用yuicompressor對uiiang-debug.jsp壓縮成uiiang.js，這樣就可以得到一個經過壓縮並包含全部.js檔案的代碼了。

packagejs.bat中使用的方法有一個缺點，那就是它在合并js檔案時的順序，是按照檔案夾及子檔案夾還有js檔案的排列順序進行合并的，也就是按檔案名稱順序排列。但是在我們實際項目中，一般情況下JS檔案的引用是要指定一個特定的載入順序，不然的話就會報錯。所以還要對packagejs.bat進行再進一步的改造。

首先要建立一個列表檔案dir.txt

Java代碼

1. ..\WebContent\js\widgets\WidgetInit.js   
2. ..\WebContent\js\utils\Cache.js   
3. ..\WebContent\js\common\GlobalConstant.js   
4. ..\WebContent\js\common\GlobalVariable.js   
5. ..\WebContent\js\common\GlobalFunc.js   
6. ..\WebContent\js\core\Initialize.js  

 

..\WebContent\js\widgets\WidgetInit.js..\WebContent\js\utils\Cache.js..\WebContent\js\common\GlobalConstant.js..\WebContent\js\common\GlobalVariable.js..\WebContent\js\common\GlobalFunc.js..\WebContent\js\core\Initialize.js

在這個檔案中，按照JSP中指定的JS檔案載入順序寫好檔案的路徑
再修改packagejs.bat

Java代碼

1. for /f %%i in (dir.txt) do type %%i >> uiiang-debug.js   
2. java -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js  

 

for /f %%i in (dir.txt) do type %%i >> uiiang-debug.jsjava -jar yuicompressor-2.4.2.jar --type js --charset utf-8 -o uiiang.js uiiang-debug.js

執行這個packagejs.bat檔案後，批處理命令會自動讀取dir.txt並按照你指定的順序逐行取出.js檔案的路徑進行，把檔案內容合并到uiiang-debug.js中。

另外要注意的一點就是在dir.txt中，一定要把所需要打包壓縮的的JS檔案路徑全部列出來，因為新的pakagejs.bat不會再自動尋找全部的JS檔案了，如果有遺漏就只好報錯

至此，批處理壓縮打包js檔案的工作就完成了，還可以將代碼中的.JS換成.css對CSS檔案進行打包，當然yuicompressor的--type也要改成css。