web-dev-qa-db-ja.com

JavaScriptコードを「縮小」する方法

JQuery にはダウンロード用の2つのバージョンがあり、1つは 生産（19KB、縮小およびGzip圧縮）、もう1つはDevelopment（120KB、非圧縮コード）です。

コンパクトな19kbバージョンをダウンロードすると、javascript実行可能コードが表示されます。彼らはどのようにそれをコンパクトにしましたか？そして、どうすればそのようなコードも「縮小」できますか？

javascriptgzip
95
KalEl

ニースがあります JavaScriptコンプレッサーの比較 ご覧ください。

87
Gumbo

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 [〜＃〜]！

  1. 不要なif、loop、varを削除します
  2. 元のコードのコピーを保管してください
  3. ミニファイアーを使用する

[〜＃〜] optional [〜＃〜]（パフォーマンスとコードの短縮）

  1. 略記演算子を使用する
  2. ビットごとの演算子を使用します（Mathを使用しないでください）
  3. 一時変数にa、b、c ...を使用します
  4. 古い構文（whileではなくfor、forEach...を使用）
  5. 関数の引数をプレースホルダーとして使用します（場合によって）
  6. 不要な"{}","()",";",spaces,newlinesを削除
  7. ミニファイアーを使用する

ミニファイヤがコードを圧縮できる場合、それは間違っています。

どのミニファイヤも不良コードを適切に圧縮することはできません。

[〜＃〜] 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サイトがあります。

私は何時間も行くことができた..しかし今のところはそれで十分だと思う。

質問がある場合は質問してください。

そして覚える

どのミニファイヤも不良コードを適切に圧縮することはできません。

45
cocco

利用可能な多くのjavascriptミニファイヤの1つを使用できます。

35
Darin Dimitrov

Googleは、コードを最小化し、デッドコードブランチを排除し、より多くの最適化を行うことができるjavascriptコンパイラを利用可能にしました。

google javascript compiler


9
Khb

縮小とともに、base64でエンコードすることもできます。ファイルがさらに圧縮されます。パラメータ（p、a、c、k、e、r）が渡されたeval（）関数内にラップされたjsファイルを見たことがあると思います。この記事でそれを読みました Javascriptファイルを縮小する方法？

3
Varg

APIを呼び出してスクリプトを縮小する小さなスクリプトを作成しました。チェックしてみてください。

#!/usr/bin/Perl
use strict;
use warnings;
use LWP::UserAgent;
use HTTP::Request;
use Fcntl;

my %api = ( css => 'https://cssminifier.com/raw', js => 'https://javascript-minifier.com/raw' );

my $DEBUG = 0;

my @files = @ARGV;

unless ( scalar(@files) ) {
    die("Filename(s) not specified");
}

my $ua = LWP::UserAgent->new;

foreach my $file (@files) {
    unless ( -f $file ) {
        warn "Ooops!! $file not found...skipping";
        next;
    }

    my ($extn) = $file =~ /\.([a-z]+)/;

    unless ( defined($extn) && exists( $api{$extn} ) ) {
        warn "type not supported...$file...skipping...";
        next;
    }

    warn "Extn: $extn, API: " . $api{$extn};

    my $data;

    sysopen( my $fh, $file, O_RDONLY );
    sysread( $fh, $data, -s $file );
    close($fh);

    my $output_filename;

    if ( $file =~ /^([^\/]+)\.([a-z]+)$/ ) {
        $output_filename = "$1.min.$2";
    }

    my $resp = $ua->post( $api{$extn}, { input => $data } );

    if ( $resp->is_success ) {
        my $resp_data = $resp->content;
        print $resp_data if ($DEBUG);
        print "\nOutput: $output_filename";

        sysopen( my $fh, $output_filename, O_CREAT | O_WRONLY | O_TRUNC );
        if ( my $sz_wr = syswrite( $fh, $resp_data ) ) {
            print "\nOuput written $sz_wr bytes\n";
            my $sz_org = -s $file;

            printf( "Size reduction %.02f%%\n\n", ( ( $sz_org - $sz_wr ) / $sz_org ) * 100 );
        }   
        close($fh);
    }
    else {
      warn: "Error: $file : " . $resp->status_line;
    }
}

使用法：

./minifier.pl a.js c.css b.js cc.css t.js j.js [..]
2
Pradeep

現在、コードを縮小する方法は2つあります。

  1. アプリケーションのバックエンド側でミニファイヤを適用します-ここでの利点は、バージョン管理を適用でき、コードをより制御できることです-ミニファイのプロセスを実質的に完全に自動化できます。ベストプラクティスは、コードが適用される前に適用することです。サーバーにアップロード-これは、多くのフロントエンド（縮小する）JavascriptおよびCSSコードがある場合に最適です。

http://yui.github.io/yuicompressor/

このようなツールの多くはNodeおよびnpmでも利用可能です-GruntでJavascriptの無効化を自動化することをお勧めします。

  1. オンラインで実行されている既存のミニファイ用の無料ツールの一部を使用できます。これらのツールを使用すると、実際には同じことを手動で実行できます。 javascript/cssコードの量が少ない場合に使用することをお勧めします-多くのファイルはありません

http://www.modify-anything.com/

1
peterBlue

私は最近、同じタスクを実行する必要がありました。 The JavaScript CompressorRater にリストされているコンプレッサーは素晴らしい仕事をし、ツールは非常に便利ですが、コンプレッサーは私が使用しているjQueryコード（$ .getScriptとjQuery.fnチェック）でニースを再生していませんでした。 Google Closure Compressor でも同じ行に詰まっています。私は最終的にねじれを取り除くことができたかもしれませんが、それを絶えず目を細めることには程遠いものでした。

最終的に問題なく機能したのは glifyJS （ありがとう @ Aries51 ）であり、圧縮は他のすべてよりわずかに少なかった。また、Googleと同様に、HTTP APIを備えています。 Packer もニースで​​あり、Perl、PHP、および.NETで言語を実装しています。

1
Wayne Weibel