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）。由於重點在於縮短代碼長度而不是代碼質量，所以功能或缺陷的丟失。