JavaScript 压缩中的权衡

两年前，NCZ 在 Extreme JavaScript Compression With YUI Compressor 里提到：

Best Optimization = Identifier Replacement

标志符替换（Identifier Replacement）在 YUI Compressor 里非常重要。
下面用 CC 表示 Closure Compiler, YC 表示 YUI Compressor.

本地文件大小

为了帮助 YC 有效进行标志符替换，下面这段代码 toogle.js:

function toggle(element) {
    if(YAHOO.util.Dom.hasClass(element, 'selected')) {
        YAHOO.util.Dom.removeClass(element, 'selected');
        return false;
    } else {
        YAHOO.util.Dom.addClass(element, 'selected');
        return true;
    }
}

推荐写成 toogle2.js:

function toggle(element) {
    var Dom = YAHOO.util.Dom,
        SELECTED = 'selected',
        ret = false;

    if(Dom.hasClass(element, SELECTED)) {
        Dom.removeClass(element, SELECTED);
    } else {
        Dom.addClass(element, SELECTED);
        ret = true;
    }
    return ret;
}

源码和压缩后的文件大小对比：

很明显，用 YC 压缩的文件最小。这是因为用 CC 压缩时，会将常量 SELECTED = 'selected' 内联回去 toggle2-cc-min.js：

function toggle(a){var b=YAHOO.util.Dom,c=false;
if(b.hasClass(a,"selected"))b.removeClass(a,"selected");
else{b.addClass(a,"selected");c=true}return c};

伟大的 gzip

从上面看起来，CC 将常量内联的做法很恼人。好在真实环境下，绝大部分服务器都开启了 gzip 压缩。来看一张图：

很