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); 
} 

节省了文件大小 32％......如果是这样的话，它是一个合理的假设，然后写作较少正在做更多为最终用户？

Answer 1

与“缩小”文件以缩小文件大小一样，您还可以“uglify”文件，该文件将您的代码缩短并像变量名称一样缩短到相同的末端：通过减少文件数量（不只是删除换行符和空格字符）。

虽然它会减少用户的加载时间，但是将缩小/丑化式代码写下来并不是一个好习惯。这就是为什么在几乎所有专业的构建/部署过程中，您都需要使用清晰的描述性代码，然后运行构建流程以减小文件大小，并最终部署最终用户加载速度更快的版本。你可以随时编写你的常规代码，然后运行一个像你描述的压缩过程，将其保存到“公共”文件夹并上传，供用户访问，而不是你丰富的代码。

Answer 2

缩小器将做的所有操作都是删除空白，就像你说的那样，它是''和EOL字符。我相信你可能会考虑文件压缩工具，比如一个.zip文件，这与你提出问题的方式有关。这样的文件类型（.zip）会在你的文件中找到常用的字符串，并且把原始字符串的引用放在它的前面，而不是写出10次。意思是如果字符串“我喜欢蛋糕”在您的文件中出现4次，它将在一个位置有“我喜欢蛋糕”，其他三个位置将引用第一个位置，缩短文件的长度并因此减少它尺寸。

那么JS，CSS和HTML被缩小的主要原因是当客户端请求一个网页时，减少从服务器传输到客户端的文件的大小。这种尺寸的减小将允许更快的加载时间。因此，从技术角度而言，写得更少是因为网页加载时间更长，但实际上，作为开发人员，您有意识地编写较短的代码以最小化文件大小，其效果可能是a）。最小化改变以实际改变或改变b）。由于重点在于缩短代码长度而不是代码质量，所以功能或缺陷的丢失。