Question

在线工具（如JSCompress）可将代码大小减少高达80％。很容易注意到压缩代码的结果会删除空间。除了EOL和＆＃39; ＆＃39;字符，缩小一个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);
}

节省32％的文件大小 ......如果是这样的话，这是一个公平的假设，那么写 less 正在做更多对于最终用户？

Answer 1

以同样的方式缩小＆＃39;一个文件，以减少其大小，你也可以＆＃39; uglify＆＃39;一个文件，它接受你的代码并将变量名之类的东西缩短到同一端：通过减少文件大小来减少文件大小（不仅仅是删除换行符和空格字符）。

虽然它会减少用户的加载时间，但是从头开始编写缩小/丑化的代码并不是一个好习惯。这就是为什么在几乎任何专业构建/部署过程中，您都会使用清晰的描述性代码，然后运行构建过程以减小文件大小，并最终部署最终用户加载时间更短的版本。您可以随时编写常规代码，然后像您描述的那样运行压缩过程，将其保存到＆＃34; public＆＃34;文件夹并上传供用户访问，而不是您的充实代码。

Answer 2

所有的缩放器都会删除空白区域，就像你说的那样，是＆＃39; ＆＃39;和EOL角色。我相信您可能正在考虑文件压缩工具，例如.zip文件，其方式与您的问题有关。这样的文件类型（.zip）将在您的文件中找到常用字符串，并将引用放在原始字符串中，而不是将其写出10次。意思是字符串＆＃34;我喜欢蛋糕＆＃34;在你的文件中显示4次，它会有＃34;我喜欢蛋糕＆＃34;在一个位置，其他三个位置将引用第一个位置，缩短文件的长度，从而减小其大小。

JS，CSS和HTML缩小的主要原因是当客户端请求网页时减少从服务器传输到客户端的文件的大小。尺寸的减小将允许更快的加载时间。因此，技术上减少写入更多的是网页加载时间，但实际上，作为开发人员有意识地编写更短的代码以最小化文件大小的效果将是a。）最小化变化以实际产生差异或b。）导致由于重点是减少代码长度而不是代码质量而导致的功能或错误丢失。

JS Minification：压缩代码

2 个答案: