JS小型化:压缩代码

Question

在线工具，如JSCompress，将减少80%的代码大小。很容易注意到，结果，压缩代码，删除了空间。除了删除EOL和“”字符之外，还有其他必要的技巧来缩小js文件吗？

示例压缩：

function glow(e){$("#"+e).fadeIn(700,function(){$(this).fadeOut(700)})}function startLevel(){ptrn=[],pos=0,setLevel(lvl),$("#mg-lvl").fadeOut("slow",function(){$("#mg-contain").prop("onclick",null).off("click"),$("#mg-contain").css("cursor","default"),$(this).text("Level "+lvl+": "+ptrn.length+" blink(s)."),$(this).fadeIn("slow"),showLevel(0)})}function setLevel(e){ptrn.push(Math.floor(3*Math.random()+1)),0==e||setLevel(--e)}function showLevel(e){$("#b"+ptrn[e]+"c").fadeOut(speed,function(){$("#ball_"+ptrn[e]).fadeOut(speed,function(){$("#b"+ptrn[e]+"c").fadeIn(speed),$(this).fadeIn(speed,function(){e+1<ptrn.length&&showLevel(++e,speed)})})}),e+1==ptrn.length&&setTimeout(bindKeys(1),ptrn.length*speed+15)}function bindKeys(e){for(var e=1;e<4;e++)bind(e)}function bind(e){$("#ball_"+e).on("click",function(){$("#b"+e+"c").fadeOut(speed,function(){$("#ball_"+e).fadeOut(speed,function(){$("#ball_"+e).fadeIn(speed),$("#b"+e+"c").fadeIn(speed),referee(e)&&unbind()})})})}function referee(e){if(pos<ptrn.length&&(e===ptrn[pos]?$("#mg-score").text(parseInt($("#mg-score").text())+1):end()),++pos==ptrn.length)return++lvl,speed-=40,!0}function unbind(){for(var e=1;e<4;e++)$("#ball_"+e).off();startLevel()}function nestedFade(e,n,t){e[n]&&$(e[n]).fadeOut("fast",function(){t[n]&&($(e),t[n]),nestedFade(e,++n,t)})}function end(){for(var e=[],n=[],t=1;t<4;t++)e.push("#b"+t+"c"),e.push("#ball_"+t),n.push(null);e.push("#mg-contain"),n.push('.fadeOut("slow")'),e.push("#mg-obj"),n.push(".fadeOut('slow')"),e.push("#bg-ball-container"),n.push(".toggle()"),nestedFade(e,0,n)}var ptrn=[],pos=0,lvl=1,speed=400,b1=setInterval(function(){glow("ball_1b",700)}),b2=setInterval(function(){glow("ball_2b",700)}),b3=setInterval(function(){glow("ball_3b",700)});

示例未压缩：

var ptrn = [];
var pos = 0;
var lvl = 1;
var speed = 400;

/* make balls glow */
function glow(id)
{
    $('#'+id).fadeIn(700, function(){$(this).fadeOut(700);})
}

var b1 = setInterval(function(){ glow('ball_1b',700) ,1500});
var b2 = setInterval(function(){ glow('ball_2b',700) ,1500});
var b3 = setInterval(function(){ glow('ball_3b',700) ,1500});
/* end */

function startLevel()
{
    ptrn = [];
    pos = 0;

    /* set pattern for the level */
    setLevel(lvl);  

    /* display prompt for level */
    $('#mg-lvl').fadeOut("slow", function(){
        $('#mg-contain').prop('onclick',null).off('click');
        $('#mg-contain').css('cursor','default');
        $(this).text("Level " + lvl + ": " + ptrn.length + " blink(s).");
        $(this).fadeIn('slow');

        /* play back the pattern for user to play */
        showLevel(0); //TODO: use promise and deferred pattern to pull this out of fade function.
    }); 
}

function setLevel(lvl)
{
    ptrn.push(Math.floor((Math.random() * 3) + 1));
    (lvl == 0 ) ? null : setLevel(--lvl);
}

function showLevel(i)
{
    /* blink the balls */
    $('#b'+ptrn[i]+'c').fadeOut(speed, function(){
        $('#ball_'+ptrn[i]).fadeOut(speed, function(){
            $('#b'+ptrn[i]+'c').fadeIn(speed);
            $(this).fadeIn(speed, function(){
                if(i+1<ptrn.length)
                    showLevel(++i,speed);
            });
        });
    });
    if( (i+1) == ptrn.length)
        setTimeout( bindKeys(1), ptrn.length*speed+15) //after the pattern is revealed bind the clicker
}

function bindKeys(i)
{
    for(var i=1;i<4;i++)
        bind(i);
}

function bind(i)
{
    $('#ball_'+i).on('click', function() {      
        $('#b'+i+'c').fadeOut(speed, function() {
            $('#ball_'+i).fadeOut(speed, function() {
                    $('#ball_'+i).fadeIn(speed);
                $('#b'+i+'c').fadeIn(speed);
                if(referee(i))
                    unbind();
            });
        });
    });
}

function referee(val)
{   
    if(pos < ptrn.length){
        ( val === ptrn[pos] ) ? $('#mg-score').text(parseInt($('#mg-score').text())+1) : end();
    }
    if(++pos == ptrn.length)
    {
        ++lvl;
        speed-=40;      
        return true;
    }
}

   function unbind()
    {               
        for(var i=1;i<4;i++)
             $( "#ball_"+i).off();
        startLevel();
    }

function nestedFade(id,i,func)
{
    (!id[i]) ? 0 : $(id[i]).fadeOut('fast',function(){ if(func[i])
{$(id)+func[i];};nestedFade(id,++i,func);}) 
}

function end()
{
    var id = [];
    var func = [];
    for(var i=1;i<4;i++){
    id.push('#b'+i+'c');    
    id.push('#ball_'+i);
    func.push(null)
}

id.push('#mg-contain');
func.push('.fadeOut("slow")');
id.push('#mg-obj');
func.push(".fadeOut('slow')");
id.push('#bg-ball-container');
func.push(".toggle()");

nestedFade(id,0,func);
}

在文件size...and上节省32% --如果是这样的话，那么写得少对最终用户来说是做更多的一个合理假设吗？

Answer 1

就像您可以“缩小”一个文件以缩小它的大小一样，您也可以“丑化”一个文件，它使用您的代码，并将变量名等内容缩短到相同的结尾:通过减少文件中的字符数量来减小文件大小(而不仅仅是删除换行符和空格字符)。

虽然它将减少用户的加载时间，但不太好地编写小型化/丑陋风格的代码。这就是为什么在几乎任何专业的构建/部署过程中，您都使用清晰的描述性代码，然后运行构建过程以减少文件的大小，并最终部署最终用户加载时间更快的版本。您可以编写您的常规代码，然后运行您所描述的压缩过程，将其保存到“公共”文件夹中，并将其上传给用户访问，而不是充实的代码。

Answer 2

一个缩小器所要做的就是删除空白，就像你说的，是‘’和EOL字符。我相信您可能会想到像.zip文件这样的文件压缩工具和您的问题的措辞方式。这样的文件类型(.zip)将在您的文件中找到常见的字符串，并将对原始字符串的引用放入其中，而不是将其写出10次。也就是说，如果字符串“我喜欢蛋糕”在您的文件中显示了4次，它将在一个位置有“我喜欢蛋糕”，而其他三个位置将引用第一个位置，缩短文件的长度，从而减小其大小。

JS、CSS和HTML缩小的主要原因是当客户端请求网页时，减少从服务器传输到客户端的文件的大小。这种大小的减少将允许更快的加载时间。因此，从技术上讲，少写更多的网页加载时间，但现实中，您作为一个开发人员有意识地编写更短的代码，以尽量减少文件大小的效果。)将改变降到最小，以使实际情况有所改变。由于专注于缩短代码长度，而不是代码质量，会导致功能或bug的丢失。