JavaScript 壓縮 與 除錯版本維護

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

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

.

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

• 優化網站內的 Javascript (Abin's Tech Note)

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

• JavaScript壓縮 (Grivan 資訊邦)

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

• 超好用的 JavaScript 壓縮工具 (Trcore's Blog)

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

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

• 驗證你的 JavaScript 程式：JSLint (The Will Will Web)

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

• http://jslint.com/lint.html (JSLint, The JavaScript Verifier)

.

再來, 是 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 />'); ;;; */

.