YUI Compressor壓縮JavaScript原理

最近寫一個jQuery外掛程式，在最後完成最佳化時，對比發現壓縮後檔案比較大，就思考那些是可以被修改和最佳化的，發現壓縮原理也有很大的空間可以學習，通過這次對YUI Compressor壓縮JavaScript深有體會，那些是可以被壓縮的，特別是那些不能被壓縮的，都需要很清楚，這樣才能寫出來的外掛程式才能保持檔案更小，代碼更精巧，而且最佳化的過程中也會發現代碼待改良的地方，對以後也有很大協助。隨便在網上找來一篇文章做記錄了。

YUI Compressor 壓縮 JavaScript 的內容包括：

• 移除注釋
• 移除額外的空格
• 細微最佳化
• 標識符替換（Identifier Replacement）

YUI Compressor包括哪些細微最佳化呢？

• object["property"] ，如果屬性名稱是合法的 JavaScript 標識符（註：合法的 JavaScript 標識符——由一個字母開頭，其後選擇性地加上一個或者多個字母、數字或底線）且不是保留字，將最佳化為： object.property
• {"property":123} ，如果屬性名稱是合法的 JavaScript 標識符且不是保留字，將最佳化為{property:123} （註：在對象字面量中，如果屬性名稱是一個合法的 JavaScript 標識符且不是保留字，並不強制要求用引號引住屬性名稱）。
• 'abcd\'efgh'，將最佳化為 "abcd'efgh"。
• "abcd" + "efgh"，如果是字串相串連，將最佳化成 "abcdefgh"（註：所有在使用 YUI Compressor 的前提下，對於指令碼中的字串串連，使用串連符 “+” 的效率和可維護性最高）。

對於 JavaScript 最有效壓縮最佳化，當屬標識符替換。

比如：

(function(){    function add(num1, num2) {        return num1 + num2;    }})();

進行屬標識符替換後：

(function(){function A(C, B) {return C+ B;    }})();

再移除額外的空格，最終成了：

(function(){function A(C,B){return C+B;}})();

YUI Compressor 標識符替換僅替換 函數名和變數名，那哪些不能被替代呢？

• 原始值：字串、布爾值、數字、null 和 undefined。一般來說字串占的空間最多，而非數字字面量其次（true、false，null，underfinded）。
• 全域變數：window、document、XMLHttpRequest等等。使用最多的就是 document、window。
• 屬性名稱，比如：foo.bar。佔據的空間僅次於字串，”.” 操作符無法被代替，且 a.b.c 更加費空間。
• 關鍵字。經常被過度使用的關鍵字有：var、return。最好的最佳化方法：一個函數僅出現一次 var 和 return 關鍵字。

對於原始值、全域變數、屬性名稱的最佳化處理方式大致相同：任何字面量值、全域變數或者屬性名稱被使用超過 2 次（包括2次），都應該用局部變數儲存代替。

但有部分情況下是禁止使用標識符替換的：

• 使用 eval() 函數。解決方案：不使用或者建立一個全域函數封裝 eval()。
• 使用 with 語句。解決方案：方法同上。
• JScript 的條件注釋。唯一解決的方法：不使用。

由於 YUI Compressor 是建立在 rhino interpreter 基礎上的，所以上述所有的最佳化都是安全的。

擴充閱讀：

• 《Extreme JavaScript Compression With YUI Compressor》