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％を保存します...そしてそのような場合には、それがその書き込み、その後公正な仮定であるがlessはです。エンドユーザはと表示されます。

Answer 1

ファイルをサイズを小さくするために「縮小」するのと同じ方法で、ファイルを「醜くする」こともできます。コードを取り、変数名のようなものを同じエンドに短縮します。 （改行や空白文字を削除するだけでなく）

ユーザーの読み込み時間が短縮されますが、小型化/醜態化されたコードをバットから外すことは大したことではありません。そのため、ほとんどすべてのプロフェッショナルなビルド/デプロイメントプロセスで、明確でわかりやすいコードを作成し、ビルドプロセスを実行してファイルのサイズを縮小し、最終的にエンドユーザーがより迅速に時間をロードできるバージョンを展開します。通常のコードを書くことができます。そして、あなたが記述したような圧縮プロセスを実行し、それを "パブリック"フォルダに保存し、あなたのコードではなくユーザがアクセスできるようにアップロードします。

Answer 2

あなたが言ったように空白を削除するのは、「と」EOL文字だけです。私はあなたの質問が語られる方法で.zipファイルのようなファイル圧縮ツールを考えているかもしれないと信じています。このようなファイルタイプ（.zip）は、ファイル内の共通の文字列を検索し、10回書き出すのではなく、元の文字列への参照を入れます。つまり、「I like cake」という文字列がファイル内で4回現れた場合、「I like cake」が1つの場所にあり、他の3つの場所がその最初の場所を参照するため、ファイルの長さが短くなります。サイズ。

JS、CSS、HTML getの主な理由は、クライアントがWebページをリクエストしたときにサーバーからクライアントに送信されるファイルのサイズを減らすことです。このサイズの減少は、より速いロード時間を可能にする。技術的に書くことは、ウェブページの読み込み時間のほうが多いですが、現実的には、開発者が意識的に短いコードを書くことで、ファイルサイズを最小限に抑えることができます。a）実際に差をつけるための変更は最小限に抑えてください。コードの品質ではなく、コード長の短縮に重点が置かれているために、機能やバグが失われていました。