Amazon Ads

2014年4月26日 星期六

【分享】YUI Compressor - JavaScript與CSS的壓縮工具

你是否有曾經因為某些網頁載入時間太久,而跳離該網頁?所以在開發網頁時,網頁程式的輕量化是一個重點。

現在大部份的網頁,除了HTML文件本身外,都還會使用JavaScriptCSS來做網頁設計與版型編排,也都是使用引入的方式來使用,在網頁開啟的時候,也是要先下載到使用者的電腦中,再由瀏覽器執行與呈現,所以這兩者檔案大小,也是影響網頁呈現是否順暢的重要因素。

在這裡我要分享一個名為YUI Compressor這個JavaScriptCSS的壓縮工具,這裡所謂壓縮並非像7-ziptar那種壓縮,而是把程式碼「最小化」的意思。

YUI Compressor是採BSD授權,先到這裡下載,下載回來後,可以得到一個yuicompressor-x.y.z.jar,前面的x、y、z表示它的版號,這裡使用2.4.8來做說明。

請注意,這是個Java應用程式,所以在執行這個jar檔之前,電腦中要先安裝Java

再來我寫了一個test.js,內容如下:
var add = function(a, b){
        var c = a + b;
        return c;
};
var sub = function(a, b){
        var c = a - b;
        return c;
};
var multiply = function(a, b){
        var c = a * b;
        return c;
};
var divide = function(a, b){
        if(b === 0){
                return 0;
        }
        var c = a / b;
        return c;
}
將上列程式碼儲存後,它的檔案大小為260 byte:
-rw-r--r--  1 bioyang  staff     260  4 26 16:05 test.js
再來我使用YUI Compressor來進行壓縮:
java -jar yuicompressor-2.4.8.jar test.js -o test-min.js --charset utf-8 --type js
上列的指令中,-o表示要輸出的檔案名稱,--charset是指定壓縮的字元編碼格式,--type是用來告知輸入的檔案是.js.css,它在輸入的檔案副檔名沒指定時才需要。

其它參數可以參考YUI Compressor文件

壓縮之後可以看到檔案大小有明顯的減少:
-rw-r--r--  1 bioyang  staff     195  4 26 16:10 test-min.js
使用編輯器來打開test-min.js
var add=function(e,d){var f=e+d;return f};var sub=function(e,d){var f=e-d;return f};var multiply=function(e,d){var f=e*d;return f};var divide=function(e,d){if(d===0){return 0}var f=e/d;return f};
可以看到除了壓縮大小處理之後,它也能對程式碼做些類似加密、混碼的動作,這對不想讓別人清楚看到程式碼結構的人,是一個非常方便的功能,但如果不要這個功能的話,可以在執行指令時,加上--nomunge這個參數。

當你的.js檔案愈大時,檔案大小減少的感覺會更明顯,比如我下載一個未壓縮的jQuery函式庫回來,還沒壓縮前的大小為:
-rw-r--r--@ 1 bioyang  staff  282944  4 26 16:20 jquery-1.11.0.js
我再用YUI Compressor來進行壓縮後,大小變成:
-rw-r--r--  1 bioyang  staff  108081  4 26 16:23 jquery-my-min.js
更有感!

當然像jQuery這種函式庫若要應用在正式產品上面時,通常還是下載他們壓縮後的版本回來使用,這裡只是用它來做個範例說明。