質問: javascriptコードを「縮小」する方法 jquery にはダウンロード用の2つのバージョンがあり、1つは 生産(19kb、縮小およびgzip圧縮)、もう1つはdevelopment(120kb、非圧縮コード)です。コンパクトな19kbバージョンをダウンロードすると、javascript実行可能コードが表示されます。彼らはどのようにそれをコンパクトにしましたか?そして、どうすればそのようなコードも「縮小」できますか?
回答: diyミニフィケーションどのミニファイヤも不良コードを適切に圧縮することはできません。この例では、ミニファイアーがどれだけ機能するかを示したいだけです。縮小する前にすべきことそしてjqueryについて...私はjqueryを使用しません.jqueryは古いブラウザ用であり、互換性の理由のために作られました.caniuse.comをチェックして、ほとんどすべてがすべてのブラウザで動作します(ie10も標準化されています今)、私は今、あなたのウェブアプリケーションを遅くするだけだと思います...$()が好きなら、あなたはあなた自身のシンプルな関数を作成する必要があります。 100kbのjqueryスクリプトごとに、非圧縮コードはどれくらいの大きさですか? 5-6kb ..?簡単にするために追加する多くのプラグインについては説明しません。オリジナルコードあなたがアイデアを持っている関数を書くとき、何かを書き始めて、時にはあなたは次のコードのようなものになることがあります。コードは動作します。今ではほとんどの人は思考を止めてこれをミニファイヤに追加して公開します。_function myfunction(mynumber){ var myarray = new array(mynumber); var myobject = new object(); var myarray2 = new array(); for(var mycounter = 0 ; mycounter < myarray.length ; mycounter++){ myarray2.push(mycounter); var mystring = mycounter.tostring() myobject mystring ] = ( mycounter + 1 ).tostring(); } var mycontainer = new array(); mycontainer[0] = myarray2; mycontainer[1] = myobject; return mycontainer; } _これが縮小されたコードです(新しい行を追加しました)を使用して最小化(- http://javascript-minifier.com/ )_function myfunction(r){ for(var n=new array(r),t=new object,e=new array,a=0;a<n.length;a++){ e.push(a); var o=a.tostring(); t[o]=(a+1).tostring() } var i=new array; return i[0]=e,i[1]=t,i } _しかし、これらのvars、ifs、loops&definitionはすべて必要ですか?ほとんどの場合[〜#〜] no [〜#〜]! 不要なif、loop、varを削除します 元のコードのコピーを保管してください ミニファイアーを使用する [〜#〜] optional [〜#〜 略記演算子を使用する ビットごとの演算子を使用します(mathを使用しないでください) 一時変数にa、b、c ...を使用します 古い構文(whileではなくfor、foreach...を使用) 関数の引数をプレースホルダーとして使用します(場合によって) 不要な"{}","()",";",spaces,newlinesを削除 ミニファイアーを使用する ミニファイヤがコードを圧縮できる場合、それは間違っています。どのミニファイヤも不良コードを適切に圧縮することはできません。[〜#〜] diy [〜#〜]_function myfunction(a,b,c){ for(b=[],c={};a--;)b[a]=a,c[a]=a+1+''; return[b,c] } _上記のコードとまったく同じことを行います。パフォーマンス http://jsperf.com/diyminify 必要なものを常に考える必要があります:「誰も以下のようなコードを書くだろう」と言う前に、ここの最初の10の質問を確認してください...10分ごとに表示される一般的な例を次に示します。再利用可能な状態が欲しい_if(condition=='true'){ var istrue=true; }else{ var istrue=false; } //same as var istrue=!!condition _存在する場合にのみyesと警告する_if(condition==true){ var istrue=true; }else{ var istrue=false; } if(istrue){ alert('yes'); } //same as !condition||alert('yes') //if the condition is not true alert yes _アラートはいまたはいいえ_if(condition==true){ var istrue=true; }else{ var istrue=false; } if(istrue){ alert('yes'); }else{ alert('no'); } //same as alert(condition?'yes':'no') //if the condition is true alert yes else no _数値を文字列に変換する、またはその逆_var a=10; var b=a.tostring(); var c=parsefloat(b) //same as var a=10,b,c; b=a+''; c=b*1 //shorter var a=10; a+='';//string a*=1;//number _数を丸める_var a=10.3899845 var b=math.round(a); //same as var b=(a+.5)|0;//numbers up to 10 decimal digits (32bit) _番号を床_var a=10.3899845 var b=math.floor(a); //same as var b=a|0;//numbers up to 10 decimal digits (32bit) _スイッチケース_switch(n) { case 1: alert('1'); break; case 2: alert('2'); break; default: alert('3'); } //same as var a=[1,2]; alert(a[n-1]||3); //same as var a={'1':1,'2':2}; alert(a[n]||3); //shorter alert([1,2][n-1]||3); //or alert([1,2][--n]||3); _キャッチしてみて_if(a&&a[b]&&a[b][c]&&a[b][c][d]&&a[b][c][d][e]){ console.log(a[b][c][d][e]); } //this is probably the onle time you should use try catch var x; try{x=a.b.c.d.e}catch(e){} !x||conole.log(x); _もしもっと_if(a==1||a==3||a==5||a==8||a==9){ console.log('yes') }else{ console.log('no'); } console.log([1,3,5,8,9].indexof(a)!=-1?'yes':'no'); _しかしindexofはこれを読むのが遅い https://stackoverflow.com/a/30335438/24507 数字_1000000000000 //same as 1e12 var onedayinms=1000*60*60*24; //same as var onedayinms=864e5; var a=10; a=1+a; a=a*2; //same as a=++a*2; _ビット単位/速記について見つけた素敵な記事/サイト: http://mudcu.be/journal/2011/11/bitwise-gems-and-other-optimizations/ http://www.140byt.es/ http://www.jquery4u.com/javascript/shorthand-javascript-techniques/ また、お気に入りの検索エンジンで検索すると、ショートハンドとビットウージーのパフォーマンスを示す多くのjsperfサイトがあります。私は何時間も行くことができた..しかし今のところはそれで十分だと思う。質問がある場合は質問してください。そして覚えるどのミニファイヤも不良コードを適切に圧縮することはできません。