[轉]]JavaScript 壓縮與除錯版本維護

本文章轉貼自:Eucaly61's DIY World ( 我的生活, 自己打造 )
作者如有不妥，通知我將馬上刪除。

－－－－－－－－－－－以下本文－－－－－－－－－－－－－

不但找到合用的 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
...

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