2008年7月18日 星期五

JavaScript 壓縮 與 除錯版本維護

不但找到合用的 JavaScript 壓縮服務 (Javascript Compressor), 同時還發現它的『特異功能』解決了我的另一個煩惱 ---- 維護『除錯版本』和『上線版本』的一致性。

於是, 壓縮的時候 會順便從『除錯版本』裡『自動拿掉除錯指令』變成『上線版本』, 而不用分成兩個檔案。

.

先簡單介紹 JavaScript 壓縮 ---- (底下借用各家的說明)

... 先「壓縮」,經過「瘦身」以後放上網路,這樣檔案會變小,使用者下載讀取的速度也會變快。... JSMin,... Packer,以及很多 Javascript Library 愛用的 Javascript Compressor,這些都可以讓你自己外掛或自行撰寫的 Javascript 達到壓縮的效果(減少不必要的字元),檔案變小、程式碼變少自然載入就會變快,這樣也是一種優化的好辦法。

http://javascriptcompressor.com/,它把原本的程式碼轉換成跟天書一樣,而且還可以測試還原回來的效果。
在javascript的壓縮,會把註解和突排刪除,甚至把程式全部變為一行。但是,將程式全部變成一行,這個問題就大了。因為如果在程式中,沒有每個敘述很嚴謹的用分號(;)來結束的話,從多行變成一行之後,程式會出錯。

Javascript Compressor 壓縮, 某些情況下,壓縮率可以接近 zip 壓縮

不過使用上需要注意 JavaScript 的語法格式, 最常遇到問題就是斷行與分號

JSLint 幫你檢查未定義的變數、函數、陳述式結尾有沒有加分號(;)、變數使用之前要先用 var 宣告、使用非數字的變數要用 === 或 !== 讓比對的時候不要自動進行轉型(Casting)、盡量不要使用 eval 函數、... 好多好多,驗證完之後會立即出一份完整的報告給你。

.

再來, 是 Javascript Compressor 的『特異功能』, 只要在行首開頭加上三個分號 (;;;), 那一整行就會在壓縮時被當做註解一樣移除,

和註解不同的是, 這些指令在『除錯版本』會被執行, 但不會出現在『上線版本』, 於是壓縮的時候 會順便從『除錯版本』裡『自動拿掉除錯指令』變成『上線版本』, 而不用分成兩個檔案。

就像底下這樣, 兩個除錯函式 debugWrite, debugWriteIf, 和呼叫它們的部份都不會出現在壓縮過的『上線版本』裡

;;; rpsFunc.debugWrite = function(a) {
;;; rps$.msg.append('<li>' + a + '</li>');
;;; };

;;; rpsFunc.debugWriteIf = function(cond, a) {
;;; if (rpsDebug.mode.search(cond)>=0) {
;;; rps$.msg.append('<li>' + a + '</li>');
;;; }
;;; };

rpsFunc.redrawBoard = function () {
myHeadmsg = DispReplace(rpsDisp.ListHead);
;;; rps$.Board.find('#headmsg').text('').append(myQQ + myHeadmsg + '</span>'); // for debug
rps$.Board.find('#headmsg').text('').append(myHeadmsg); // for debug
rps$.Board.find('#progress').text('');
rps$.mainList.html('<ul>'); // mainList renew
...

.

至於『除錯版本』不執行, 但『上線版本』要執行的指令則可以這樣處理 :

  • if 搭配一個變數控制『除錯版本』要不要執行, 但 if 及對應的 { } 則不會出現在『上線版本』, 中間的指令就會被執行

  • 『除錯版本』的指令被夾在註解裡, 但『上線版本』則會執行這些指令

;;; if (!rpsDebug.jsonLocal) {
rpsFunc.readOK();
;;; }

...

;;; /*
rps$.Board.append('<br />');
;;; */

.

0 意見:

發表您的回應

張貼留言