現在大部份的網頁,除了HTML文件本身外,都還會使用JavaScript和CSS來做網頁設計與版型編排,也都是使用引入的方式來使用,在網頁開啟的時候,也是要先下載到使用者的電腦中,再由瀏覽器執行與呈現,所以這兩者檔案大小,也是影響網頁呈現是否順暢的重要因素。
在這裡我要分享一個名為YUI Compressor這個JavaScript與CSS的壓縮工具,這裡所謂壓縮並非像7-zip或tar那種壓縮,而是把程式碼「最小化」的意思。
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這種函式庫若要應用在正式產品上面時,通常還是下載他們壓縮後的版本回來使用,這裡只是用它來做個範例說明。