素晴らしいコミュニティモジュール

UglifyJS 3

UglifyJSは、JavaScriptパーサー、ミニファイア、コンプレッサー、およびビューティファイアツールキットです。

注意:

  • uglify-js@3は、 uglify-js@2との下位互換性がない簡略化されたAPICLIがあります
  • UglifyJS 2.xリリースのドキュメントは、ここにあります
  • uglify-jsはJavaScript(ECMAScript 5)のみをサポートします。
  • To minify ECMAScript 2015 or aboveBabelなどのツールを使用してトランスパイルします。

インストール

まず、最新バージョンのnode.jsがインストールされていることを確認します(この手順の後でコンピューターを再起動する必要がある場合があります)。

コマンドラインアプリとして使用するためのNPMから:

1
npm install uglify-js -g

プログラムで使用するためのNPMから:

1
npm install uglify-js

コマンドラインの使用法

1
uglifyjs [input files] [options]

UglifyJSは複数の入力ファイルを受け取ることができます。最初に入力ファイルを渡し、次にオプションを渡すことをお勧めします。UglifyJSは入力ファイルを順番に解析し、圧縮オプションを適用します。ファイルは同じグローバルスコープ、つまり参照で解析されます。ファイルから別のファイルで宣言された変数/関数への変換は適切に照合されます。

入力ファイルが指定されていない場合、UglifyJSはSTDINから読み取ります。

入力ファイルの前にオプションを渡したい場合は、入力ファイルがオプション引数として使用されないように、2つを二重ダッシュで区切ります。

1
uglifyjs --compress --mangle -- input.js

Command line options

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
-h, --help Print usage information. `--help options` for details on available options. -V, --version Print version number. -p, --parse <options> Specify parser options: `acorn` Use Acorn for parsing. `bare_returns` Allow return outside of functions. Useful when minifying CommonJS modules and Userscripts that may be anonymous function wrapped (IIFE) by the .user.js engine `caller`. `expression` Parse a single expression, rather than a program (for parsing JSON). `spidermonkey` Assume input files are SpiderMonkey AST format (as JSON). -c, --compress [options] Enable compressor/specify compressor options: `pure_funcs` List of functions that can be safely removed when their return values are not used. -m, --mangle [options] Mangle names/specify mangler options: `reserved` List of names that should not be mangled. --mangle-props [options] Mangle properties/specify mangler options: `builtins` Mangle property names that overlaps with standard JavaScript globals. `debug` Add debug prefix and suffix. `domprops` Mangle property names that overlaps with DOM properties. `keep_quoted` Only mangle unquoted properties. `regex` Only mangle matched property names. `reserved` List of names that should not be mangled. -b, --beautify [options] Beautify output/specify output options: `beautify` Enabled with `--beautify` by default. `preamble` Preamble to prepend to the output. You can use this to insert a comment, for example for licensing information. This will not be parsed, but the source map will adjust for its presence. `quote_style` Quote style: 0 - auto 1 - single 2 - double 3 - original `wrap_iife` Wrap IIFEs in parenthesis. Note: you may want to disable `negate_iife` under compressor options. -o, --output <file> Output file path (default STDOUT). Specify `ast` or `spidermonkey` to write UglifyJS or SpiderMonkey AST as JSON to STDOUT respectively. --comments [filter] Preserve copyright comments in the output. By default this works like Google Closure, keeping JSDoc-style comments that contain "@license" or "@preserve". You can optionally pass one of the following arguments to this flag: - "all" to keep all comments - a valid JS RegExp like `/foo/` or `/^!/` to keep only matching comments. Note that currently not *all* comments can be kept when compression is on, because of dead code removal or cascading statements into sequences. --config-file <file> Read `minify()` options from JSON file. -d, --define <expr>[=value] Global definitions. --ie8 Support non-standard Internet Explorer 8. Equivalent to setting `ie8: true` in `minify()` for `compress`, `mangle` and `output` options. By default UglifyJS will not try to be IE-proof. --keep-fnames Do not mangle/drop function names. Useful for code relying on Function.prototype.name. --name-cache <file> File to hold mangled name mappings. --self Build UglifyJS as a library (implies --wrap UglifyJS) --source-map [options] Enable source map/specify source map options: `base` Path to compute relative paths from input files. `content` Input source map, useful if you're compressing JS that was generated from some other original code. Specify "inline" if the source map is included within the sources. `filename` Name and/or location of the output source. `includeSources` Pass this flag if you want to include the content of source files in the source map as sourcesContent property. `root` Path to the original source to be included in the source map. `url` If specified, path to the source map to append in `//# sourceMappingURL`. --timings Display operations run time on STDERR. --toplevel Compress and/or mangle variables in top level scope. --verbose Print diagnostic messages. --warn Print warning messages. --wrap <name> Embed everything in a big function, making the “exports” and “global” variables available. You need to pass an argument to this option to specify the name that your module will take when included in, say, a browser.

--output-o )を指定して、出力ファイルを宣言します。それ以外の場合、出力はSTDOUTに送られます。

CLIソースマップオプション

UglifyJSは、圧縮されたJavaScriptのデバッグに非常に役立つソースマップファイルを生成できます。ソースマップを取得するには、 --source-map --output output.js (ソースマップはoutput.js.map書き出されoutput.js.map )。 。

追加オプション:

  • --source-map "filename='<NAME>'"は、ソースマップの名前を指定します。

  • --source-map "root='<URL>'"は、元のファイルが見つかるURLを渡します。

  • --source-map "url='<URL>'"は、ソースマップを見つけることができるURLを指定します。それ以外の場合、UglifyJSはHTTP X-SourceMapが使用されていると想定し、 //# sourceMappingURL=ディレクティブを省略します。

例えば:

1 2 3
uglifyjs js/file1.js js/file2.js \ -o foo.min.js -c -m \ --source-map "root='http://foo.com/src',url='foo.min.js.map'"

上記は、 file1.jsfile2.jsを圧縮してマングルし、出力をfoo.min.jsに、ソースマップをfoo.min.js.mapます。ソースマッピングはhttp://foo.com/src/js/file1.jsを参照します。 http://foo.com/src/js/file1.jsおよびhttp://foo.com/src/js/file2.js (実際には、ソースマップルートとしてhttp://foo.com/srcがリストされ、元のファイルは次のようにリストされます。 js/file1.jsおよびjs/file2.js )。

Composed source map

CoffeeScriptなどのコンパイラによって出力されたJSコードを圧縮する場合、JSコードへのマッピングはあまり役に立ちません。代わりに、元のコード(つまり、CoffeeScript)にマッピングし直したいと思います。UglifyJSには入力ソースマップを取得するオプション。CoffeeScript→コンパイル済みJSからのマッピングがあるとすると、UglifyJSは、コンパイル済みJS内のすべてのトークンを元の場所にマッピングすることにより、CoffeeScript→圧縮JSからマップを生成できます。

この機能を使用するには、ソースマップがソースとインラインで含まれている場合は、 --source-map "content='/path/to/input/source.map'"または--source-map "content=inline" --source-map "content='/path/to/input/source.map'"ます。

CLI圧縮オプション

コンプレッサーを有効にするには、 --compress-c )を渡す必要がありますオプションで、圧縮オプションのコンマ区切りリストを渡すことができます

オプションは、 foo=bar 、または単にfooの形式です(後者は、 trueに設定するブールオプションを意味しtrue 。これは、事実上foo=trueショートカットfoo=true )。

例:

1
uglifyjs file.js -c toplevel,sequences=false

CLIマングルオプション

あなたは合格する必要がマングラー有効にするには--mangle-m 。)以下(カンマ区切り)のオプションがサポートされています。

  • toplevel (デフォルトはfalse )-トップレベルスコープで宣言されたマングル名。

  • eval (デフォルトはfalseevalまたはwithが使用されwithいるスコープに表示されるマングル名。

マングリングが有効になっているが、特定の名前が--mangle reservedれないようにしたい場合は、 --mangle reservedを使用してそれらの名前を宣言でき--mangle reserved —名前のコンマ区切りリストを渡します。次に例を示します。

1
uglifyjs ... -m reserved=['$','require','exports']

requireexports$名前が変更されないようにrequireため。

CLIマングリングプロパティ名( --mangle-props

注:これにより、コードが破損する可能性があります。プロパティ名のマングリングは、変数名のマングリングとは別の手順です。有効にするには、 --mangle-props--mangle-propsます。組み込みのDOMプロパティを除いて、入力コード内のすべてのプロパティがマングルされます。およびコアJavaScriptクラスのプロパティ。例:

1 2 3 4 5 6 7 8 9 10 11
// example.js var x = { baz_: 0, foo_: 1, calc: function() { return this.foo_ + this.baz_; } }; x.bar_ = 2; x["baz_"] = 3; console.log(x.calc());

すべてのプロパティをマングルします(JavaScript builtinsを除く):

1
$ uglifyjs example.js -c -m --mangle-props
1
var x={o:0,_:1,l:function(){return this._+this.o}};x.t=2,x.o=3,console.log(x.l());

reservedプロパティを除くすべてのプロパティをマングルします。

1
$ uglifyjs example.js -c -m --mangle-props reserved=[foo_,bar_]
1
var x={o:0,foo_:1,_:function(){return this.foo_+this.o}};x.bar_=2,x.o=3,console.log(x._());

regex一致するすべてのプロパティをマングルします。

1
$ uglifyjs example.js -c -m --mangle-props regex=/_$/
1
var x={o:0,_:1,calc:function(){return this._+this.o}};x.l=2,x.o=3,console.log(x.calc());

マングルプロパティオプションの組み合わせ:

1
$ uglifyjs example.js -c -m --mangle-props regex=/_$/,reserved=[bar_]
1
var x={o:0,_:1,calc:function(){return this._+this.o}};x.bar_=2,x.o=3,console.log(x.calc());

これを使用できるようにするために、デフォルトで標準のJS名を操作することは避けています( --mangle-props builtinsをオーバーライドします)。

デフォルトの除外ファイルがtools/domprops.jsonで提供されており、さまざまなブラウザで定義されているほとんどの標準JSおよびDOMプロパティをカバーしている必要があります。この機能を無効にするには、 --mangle-props domprops--mangle-props dompropsます。

通常の式を使用して、 --mangle-props regex=/^_/するプロパティ名を定義できます。たとえば、 --mangle-props regex=/^_/は、アンダースコアで始まるプロパティ名のみをマングルします。

このオプションを使用して複数のファイルを圧縮する場合、それらが最終的に連携するためには、何らかの方法で1つのプロパティがすべての--name-cache filename.json同じ名前にマングルされるようにする必要があります。このために--name-cache filename.json渡し--name-cache filename.json UglifyJSは、これらのマッピングをファイルに保持し、再利用できるようにします。最初は空である必要があります。例:

1 2 3
$ rm -f /tmp/cache.json # start fresh $ uglifyjs file1.js file2.js --mangle-props --name-cache /tmp/cache.json -o part1.js $ uglifyjs file3.js file4.js --mangle-props --name-cache /tmp/cache.json -o part2.js

これで、 part1.jspart2.jsは、 part2.jsされたプロパティ名に関して互いに一貫性があります。

UglifyJSへの1回の呼び出しですべてのファイルを圧縮する場合は、名前キャッシュを使用する必要はありません。

引用符で囲まれていない名前の--mangle-props keep_quoted--mangle-props keep_quoted

引用符で囲まれたプロパティ名( o["foo"] )を使用すると、プロパティ名( foo )が予約されるため、引用符で囲まれていないスタイル( o.foo )で使用された場合でも、スクリプト全体でo.fooされません。例:

1 2 3 4 5 6 7
// stuff.js var o = { "foo": 1, bar: 3 }; o.foo += o.bar; console.log(o.foo);
1
$ uglifyjs stuff.js --mangle-props keep_quoted -c -m
1
var o={foo:1,o:3};o.foo+=o.o,console.log(o.foo);

Debugging property name mangling

プロパティ名を完全に隠さずにマングルするために--mangle-props debug渡すこともできます。たとえば、このオプションを使用すると、プロパティo.fooo._$foo$_マングルします。これにより、大規模なコードベースのプロパティマングリングが可能になります。それでもコードをデバッグし、マングリングが問題を引き起こしている場所を特定することができます。

1
$ uglifyjs stuff.js --mangle-props debug -c -m
1
var o={_$foo$_:1,_$bar$_:3};o._$foo$_+=o._$bar$_,console.log(o._$foo$_);

--mangle-props debug=XYZを使用してカスタムサフィックスを渡すこともできます。これにより、 o.fooo._$foo$XYZ_ます。スクリプトをコンパイルするたびにこれを変更して、プロパティがマングルo.fooれた方法を特定できます。 。1つの手法は、コンパイルごとにランダムな番号を渡して、さまざまな入力でのマングリングの変更をシミュレートし(たとえば、入力スクリプトを新しいプロパティで更新するとき)、マングルされたキーをストレージに書き込むなどの間違いを特定するのに役立ちます。

APIリファレンス

NPMを介したインストールを想定すると、次のようにUglifyJSをアプリケーションにロードできます。

1
var UglifyJS = require("uglify-js");

単一の高レベル関数minify(code, options)があり、構成可能な方法ですべてのミニminify()フェーズを実行します。デフォルトでは、 minify()はオプションのcompressmangleを有効にします。例:

1 2 3 4
var code = "function add(first, second) { return first + second; }"; var result = UglifyJS.minify(code); console.log(result.error); // runtime error, or `undefined` if no error console.log(result.code); // minified output: function add(n,d){return n+d}

キーがファイル名で値がソースコードである最初の引数にオブジェクトを使用することで、一度に複数のJavaScriptファイルをminifyできます:

1 2 3 4 5 6 7
var code = { "file1.js": "function add(first, second) { return first + second; }", "file2.js": "console.log(add(1 + 2, 3 + 4));" }; var result = UglifyJS.minify(code); console.log(result.code); // function add(d,n){return d+n}console.log(add(3,7));

toplevelオプション:

1 2 3 4 5 6 7 8
var code = { "file1.js": "function add(first, second) { return first + second; }", "file2.js": "console.log(add(1 + 2, 3 + 4));" }; var options = { toplevel: true }; var result = UglifyJS.minify(code, options); console.log(result.code); // console.log(3+7);

nameCacheオプション:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
var options = { mangle: { toplevel: true, }, nameCache: {} }; var result1 = UglifyJS.minify({ "file1.js": "function add(first, second) { return first + second; }" }, options); var result2 = UglifyJS.minify({ "file2.js": "console.log(add(1 + 2, 3 + 4));" }, options); console.log(result1.code); // function n(n,r){return n+r} console.log(result2.code); // console.log(n(3,7));

次の方法で、名前キャッシュをファイルシステムに永続化できます。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
var cacheFileName = "/tmp/cache.json"; var options = { mangle: { properties: true, }, nameCache: JSON.parse(fs.readFileSync(cacheFileName, "utf8")) }; fs.writeFileSync("part1.js", UglifyJS.minify({ "file1.js": fs.readFileSync("file1.js", "utf8"), "file2.js": fs.readFileSync("file2.js", "utf8") }, options).code, "utf8"); fs.writeFileSync("part2.js", UglifyJS.minify({ "file3.js": fs.readFileSync("file3.js", "utf8"), "file4.js": fs.readFileSync("file4.js", "utf8") }, options).code, "utf8"); fs.writeFileSync(cacheFileName, JSON.stringify(options.nameCache), "utf8");

minify()オプションの組み合わせの例:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
var code = { "file1.js": "function add(first, second) { return first + second; }", "file2.js": "console.log(add(1 + 2, 3 + 4));" }; var options = { toplevel: true, compress: { global_defs: { "@console.log": "alert" }, passes: 2 }, output: { beautify: false, preamble: "/* uglified */" } }; var result = UglifyJS.minify(code, options); console.log(result.code); // /* uglified */ // alert(10);"

警告を生成するには:

1 2 3 4 5 6
var code = "function f(){ var u; return 2 + 3; }"; var options = { warnings: true }; var result = UglifyJS.minify(code, options); console.log(result.error); // runtime error, `undefined` in this case console.log(result.warnings); // [ 'Dropping unused variable u [0:1,18]' ] console.log(result.code); // function f(){return 5}

エラーの例:

1 2 3
var result = UglifyJS.minify({"foo.js" : "if (0) else console.log(1);"}); console.log(JSON.stringify(result.error)); // {"message":"Unexpected token: keyword (else)","filename":"foo.js","line":1,"col":7,"pos":7}

注:それは異なり`uglify-js@2.x , the APIは以下の通り行うことができ、同様の効果の一つ達成するためにはないスローエラーを行い3.x`:

1 2
var result = UglifyJS.minify(code, options); if (result.error) throw result.error;

オプションを最小化する

  • warnings (デフォルトはfalse )— trueを渡すと、結果にコンプレッサーの警告が返されますresult.warnings 。より詳細な警告を表示するには、値"verbose"を使用します。

  • parse (デフォルト{} )—追加の解析オプションを指定する場合はオブジェクトを渡します

  • compress (デフォルト{} )— falseを渡すと、完全に圧縮がスキップされます。オブジェクトを渡して、カスタム圧縮オプションを指定します

  • mangle (デフォルトはtrue )— falseを渡してマングリング名をスキップするか、オブジェクトを渡してmangleオプションを指定します(以下を参照)。

  • output (デフォルトはnull )—追加の出力オプションを指定する場合は、オブジェクトを渡します。デフォルトは、最適な圧縮のために最適化されています。

  • sourceMap (デフォルトはfalse )-ソースマップオプションを指定する場合は、オブジェクトを渡します

  • toplevel (デフォルトはfalsetoplevelトップレベルの変数と関数名のマングリングを有効にし、未使用の変数と関数を削除する場合は、 true設定します。

  • nameCache (デフォルトはnullnameCache minify()複数の呼び出しにわたってminify()変数とプロパティ名をキャッシュする場合は、空のオブジェクト{}または以前に使用されたnameCacheオブジェクトをnameCacheます。注:これは読み取り/書き込みプロパティですminify()はこのオブジェクトの名前キャッシュの状態を読み取り、最小化中に更新して、ユーザーが再利用したり、外部で永続化したりできるようにします。

  • ie8 (デフォルトはfalse )-IE8をサポートするにはtrueに設定します。

  • keep_fnames (デフォルト: false )-pass true廃棄または関数名のマングリングを防止するためのコードのための便利に頼る。 Function.prototype.name

オプション構造を最小化する

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
{ parse: { // parse options }, compress: { // compress options }, mangle: { // mangle options properties: { // mangle property options } }, output: { // output options }, sourceMap: { // source map options }, nameCache: null, // or specify a name cache object toplevel: false, ie8: false, warnings: false, }

Source map options

ソースマップを生成するには:

1 2 3 4 5 6 7 8
var result = UglifyJS.minify({"file1.js": "var a = function() {};"}, { sourceMap: { filename: "out.js", url: "out.js.map" } }); console.log(result.code); // minified output console.log(result.map); // source map

ソースマップをファイルに保存されていない、それはちょうどに返されることに注意result.map 。のために渡された値sourceMap.urlセットのみに使用されている//# sourceMappingURL=out.js.mapresult.code 。の値filenameは、ソースマップファイルのfile属性(仕様を参照)を設定するためにのみ使用されます。

オプションsourceMap.url"inline"と、ソースマップがコードに追加されます。

ソースマップに含めるsourceRootプロパティを指定することもできます。

1 2 3 4 5 6
var result = UglifyJS.minify({"file1.js": "var a = function() {};"}, { sourceMap: { root: "http://example.com/src", url: "out.js.map" } });

コンパイルされたJavaScriptを圧縮していて、そのソースマップがある場合は、 sourceMap.contentを使用できます。

1 2 3 4 5 6 7
var result = UglifyJS.minify({"compiled.js": "compiled code"}, { sourceMap: { content: "content from compiled.js.map", url: "minified.js.map" } }); // same as before, it returns `code` and `map`

代わりにX-SourceMapヘッダーを使用している場合は、 X-SourceMap省略sourceMap.urlます。

解析オプション

  • bare_returns (デフォルトはfalse )-トップレベルのreturnステートメントをサポート

  • html5_comments (デフォルトはtrue

  • shebang (デフォルトはtrue )-最初の行として#!commandをサポート

圧縮オプション

  • arguments (デフォルト: true )-可能な限り、 arguments[index]を関数パラメーター名に置き換えarguments[index]

  • booleans (デフォルト: true )-ブールコンテキストのさまざまな最適化!!a ? b : c → a ? b : cたとえば、 !!a ? b : c → a ? b : c

  • collapse_vars (デフォルト: true ) -折りたたみシングルユース非定数の変数、副作用が可能となります。

  • comparisons (デフォルト: true )-バイナリノードに特定の最適化を適用します。たとえば、 !(a <= b) → a > b 、バイナリノードを否定しようとしa = !b && !c && !d && !e → a=!(b||c||d||e)たとえばa = !b && !c && !d && !e → a=!(b||c||d||e)など

  • conditionals (デフォルト: true ) -のために最適化を適用if -sと条件式

  • dead_code (デフォルト: true )-到達不能なコードを削除します

  • drop_console (デフォルト: falsedrop_console console.*関数への呼び出しを破棄するには、 trueを渡しtrue console.infoなどの特定の関数呼び出しをドロップしたり、関数呼び出しをドロップした後に関数引数からの副作用を保持したりする場合は、 pure_funcsを使用しますpure_funcs代わりに。

  • drop_debugger (デフォルト: true )- debugger;削除しdebugger;ステートメント

  • evaluate (デフォルト: true )-定数式の評価を試みます

  • expression (デフォルト: false ) -渡しtrueずに、端末のステートメントから完了値を維持するためにreturnブックマークレットで、例えば。

  • global_defs (デフォルト: {} )-条件付きコンパイルを参照

  • hoist_funs (デフォルト: false )-ホイスト関数の宣言

  • hoist_props (デフォルト: true )-定数オブジェクトおよび配列リテラルから一連の制約の対象となる通常の変数にプロパティをホイストします。例: var o={p:1, q:2}; f(op, oq); is f(1, 2);変換されますf(1, 2);注: hoist_propsは、 mangle有効で、 compressオプションpasses2以上に設定され、 compressオプションのtoplevel有効になっている場合に最適に機能します。

  • hoist_vars (デフォルト: false )-ホイストvar宣言(一般に出力のサイズが大きくなるように見えるため、これはデフォルトでfalseです)

  • if_return (デフォルト: trueif_return / returnおよびif / continueの最適化

  • inline (デフォルト: true )-simple / returnステートメントを使用した関数へのインライン呼び出し:

    • false - 0と同じ
    • 0インライン化を無効にしました
    • 1インラインの単純な関数
    • 2引数付きのインライン関数
    • 3引数と変数を持つインライン関数
    • true - 3と同じ
  • join_vars (デフォルト: true )-連続するvarステートメントを結合します

  • keep_fargs (デフォルト: true )-コンプレッサーが未使用の関数引数を破棄しないようにします。これは、 Function.length依存するコードに必要です。

  • keep_fnames (デフォルト: false ) -峠true 。関数名を捨てるからコンプレッサーを防ぐために、コードのための有用なに頼るFunction.prototype.name 。参照: keep_fnamesマングルオプションを

  • keep_infinity (デフォルト: false ) -渡しtrue防ぐためにInfinityに圧縮されてから1/0クロームのパフォーマンスの問題を引き起こす可能性があります。

  • loops (デフォルト: true )-条件を静的に判別できる場合のdowhile 、およびforループの最適化。

  • negate_iife (デフォルト: true )-コードジェネレータが挿入するnegate_iifeを回避するために、戻り値が破棄される「Immediately- negate_iife 」を否定します。

  • passes (デフォルト: 1 )-compressを実行する最大回数。パスが複数あると、コードがさらに圧縮される場合があります。パスが多いほど、時間がかかることに注意してください。

  • properties (デフォルト: true )-ドット表記を使用してプロパティアクセスを書き換えproperties (例: foo["bar"] → foo.bar

  • pure_funcs (デフォルト: null )-名前の配列を渡すことができ、UglifyJSはそれらの関数が副作用を生成しないと想定します。危険:名前がスコープで再定義されているかどうかをチェックしません。ここでの例のケース、たとえばvar q = Math.floor(a/b) 。変数qが他の場所で使用されていない場合、UglifyJSはそれを削除しますが、 Math.floor(a/b)保持し、それが何をするのかpure_funcs: [ 'Math.floor' ]ませんpure_funcs: [ 'Math.floor' ]を渡すことができpure_funcs: [ 'Math.floor' ]は、この関数が副作用を生成しないことをpure_funcs: [ 'Math.floor' ]ます。その場合、ステートメント全体が破棄されます。現在の実装では、オーバーヘッドが追加されます(圧縮が遅くなります) pure_funcs下のシンボルも確認してください。 mangle.reserved下。マングリングを避けるためにmangle.reserved

  • pure_getters (デフォルト: "strict" )-これにtrueを渡すと、UglifyJSはオブジェクトプロパティアクセス(例: foo.barまたはfoo["bar"] )に副作用がないとfoo.bar foo["bar"]"strict"をに指定します。 fooがスローしないことが確実である場合、つまりnullまたはundefinedない場合にのみ、 foo.barを副作用のfoo.barとして扱いnull

  • reduce_funcs (デフォルト: true )-許可されている場合は、シングルユース関数を関数式としてインライン化して、さらに最適化できます。デフォルトで有効になっています。オプションは、有効になっているreduce_varsによって異なります。このオプションを無効にすると、一部のコードがreduce_varsエンジンでより高速に実行されます。 。他の主要なブラウザに悪影響を与えません。

  • reduce_vars (デフォルト: true )-定数値として割り当てられ、使用される変数の最適化を改善します。

  • sequences (デフォルト: true )-コンマ演算子を使用して連続する単純なステートメントを結合します。正の整数に設定して、生成される連続するコンマシーケンスの最大数を指定できます。このオプションがtrue設定されてtrue場合、デフォルトのsequences制限されて200に設定オプションfalseまたは0を無効に。最小のsequences長さがある2 A sequencesの値1と同等に適用除外されtrueと、このような手段として、 200デフォルトのシーケンスが非常に遅い圧縮回にリードを制限まれにその場合、 20以下の値をお勧めします。

  • side_effects (デフォルト: true ) -パスfalse 。 "純粋な"とマークされた無効潜在的に落とす機能へのコメント注釈があればA関数呼び出しが"純粋"としてマークされている/*@__PURE__*/または/*#__PURE__*/すぐに先行例: /*@__PURE__*/foo();

  • switches (デフォルト: true )-到達不能なswitchブランチの重複排除と削除

  • toplevel (デフォルト: false )-参照されていない関数( "funcs" )および/または変数( "vars" )をトップレベルスコープにドロップします(デフォルトではfalse 、参照されていない関数と変数の両方を削除するにはtrue

  • top_retain (デフォルト: null )-特定のトップレベル関数および変数がunused削除されunusedようにします(配列、コンマ区切り、RegExp、または関数にすることができます。 toplevel意味します)

  • typeofs (デフォルト: truetypeofs typeof foo == "undefined"foo === void 0変換します。注:既知の問題があるため、IE10以前のバージョンではこの値をfalseに設定することをお勧めします。

  • unsafe (デフォルト: false )-「安全でない」変換を適用します(以下の説明)

  • unsafe_comps (デフォルト: false )- unsafe_compsオペランドもNaN (強制的に)できないと仮定してa <= bような式を圧縮します。

  • unsafe_Function (デフォルト: false ) -湿布とマングルFunction(args, code)の両方のargscode文字列リテラルです。

  • unsafe_math (デフォルト: false2 * x * 3ような数値式を6 * xに最適化します。これにより、浮動小数点の結果が不正確になる可能性があります。

  • unsafe_proto (デフォルト: falseArray.prototype.slice.call(a)ような式を[].slice.call(a)最適化します

  • unsafe_regexp (デフォルト: false )-定数であるかのように、 RegExp値で変数の置換を有効にします。

  • unsafe_undefined (デフォルト: false )-スコープ内にundefinedという名前の変数がある場合はvoid 0置き換えvoid 0 (変数名はマングルされ、通常は1文字になります)

  • unused (デフォルト: true )-参照されていない関数と変数を削除します( "keep_assign"設定されていない限り、単純な直接変数割り当ては参照としてカウントされません)

  • warnings (デフォルト: false )-到達不能なコードや未使用の宣言などを削除したときに警告を表示します。

マングルオプション

  • eval (デフォルトはfalseevalまたはwithが使用されwithいるスコープに表示されるマングル名にtrueを渡しtrue

  • keep_fnames (デフォルトfalse ) -パスはtrueではないマングル関数名にに依存するコードに便利です。 Function.prototype.nameも参照してください:。 keep_fnames圧縮オプションを

  • reserved (デフォルト[] )-マングリングから除外する必要がある識別子の配列を渡します。例: ["foo", "bar"]

  • toplevel (デフォルトはfalse )-トップレベルスコープで宣言されたマングル名にtrueを渡しtrue

例:

1 2 3 4 5
// test.js var globalVar; function funcName(firstLongName, anotherLongName) { var myVariable = firstLongName + anotherLongName; }
1 2 3 4 5 6 7 8 9 10
var code = fs.readFileSync("test.js", "utf8"); UglifyJS.minify(code).code; // 'function funcName(a,n){}var globalVar;' UglifyJS.minify(code, { mangle: { reserved: ['firstLongName'] } }).code; // 'function funcName(firstLongName,a){}var globalVar;' UglifyJS.minify(code, { mangle: { toplevel: true } }).code; // 'function n(n,a){}var a;'

Mangle properties options

  • builtins (デフォルト: false )-組み込みDOMプロパティのマングリングを許可するには、 trueを使用します。この設定をオーバーライドすることはお勧めしません。

  • debug (デフォルト: false )-元の名前がまだ存在するマングル名。空の文字列""を渡して有効にするか、空でない文字列を渡してデバッグサフィックスを設定します。

  • keep_quoted (デフォルト: false )-引用符で囲まれていないプロパティ名のみをマングルします。

  • regex (デフォルト: null )-RegExpリテラルを、通常の式に一致するプロパティ名のみをマングルに渡しnull

  • reserved (デフォルト: [] )- reserved配列にリストされているプロパティ名をマングルしないでください。

出力オプション

コードジェネレータは、デフォルトで可能な限り最短のコードを出力しようとします。美化された出力が必要な場合は、 --beautify-b )を渡します。オプションで、コード出力を制御する追加の引数を渡すことができます。

  • ascii_only (デフォルトはfalse )-文字列およびregexps内のUnicode文字をエスケープします(非ascii文字が無効になるディレクティブに影響します)

  • beautify (デフォルトはtrue )-出力を実際に美化するかどうか。- -bを渡すとこれがtrueに設定されますが、追加の引数を指定するために、最小化されたコードを生成する場合でも-bを渡す必要がある場合があります。 -b beautify=falseを使用してオーバーライドします。

  • braces (デフォルトはfalse )-本体が単一のステートメントであっても、 iffordowhileまたはwithステートメントには常にブレースを挿入します。

  • comments (デフォルトはfalsetrueまたは"all"を渡してすべてのコメントを保持し、 "some"を渡して一部のコメントを保持し、正規の式文字列( /^!/ )または関数を渡しtrue

  • indent_level (デフォルトは4

  • indent_start (デフォルトは0 )-すべての行の前にその数のスペースをindent_startます

  • inline_script (デフォルトはtrue )-文字列内の</script>出現でHTMLコメントとスラッシュをエスケープします

  • keep_quoted_props (デフォルトはfalse )-オンにすると、オブジェクトリテラルのプロパティ名から引用符がkeep_quoted_propsれなくなります。

  • max_line_len (デフォルトはfalse )-最大行長(醜いコードの場合)

  • preamble (デフォルトはnull )-渡されると文字列である必要があり、文字通り出力の前に追加されます。ソースマップはこのテキストに合わせて調整されます。たとえば、ライセンス情報を含むコメントを挿入するために使用できます。

  • preserve_line (デフォルトはfalse )-行を保持するためにtrueを渡しtrueが、 beautifyfalse設定されている場合にのみ機能しfalse

  • quote_keys (デフォルトはfalse )-リテラルオブジェクトのすべてのキーを引用するにはtrueを渡します

  • quote_style (デフォルトは0 )-文字列の優先引用スタイル(引用されたプロパティ名とディレクティブにも影響します):

    • 0二重引用符を優先し、文字列自体に二重引用符が多い場合は一重引用符に切り替えます0はgzipサイズに最適です。
    • 1常に一重引用符を使用する
    • 2常に二重引用符を使用します
    • 3常に元の引用符を使用します
  • semicolons (デフォルトtrue ) -セミコロンで区切り文を渡すと。 falseのgzipが小さくなるようになる前に、その可能な限り、我々はuglifiedコード(サイズのより読みやすい出力につながる、代わりにセミコロンの改行を使用します。サイズはgzip後にわずかに大きくなります)。

  • shebang (デフォルトはtrue )-プリアンブルにshebang #!を保持(bashスクリプト)

  • webkit (デフォルトはfalse )-WebKitバグの回避策を有効にします。PhantomJSユーザーはこのオプションをtrue設定する必要がありtrue

  • width (デフォルトは80 )-美化がオンの場合にのみ有効になります。これは、美化が従おうとする(方向性のある)線幅を指定します。これは、行テキストの幅(インデントを除く)を指します。機能しません。現在は非常にうまくいっていますが、UglifyJSによって生成されたコードが読みやすくなります。

  • wrap_iife (デフォルトfalse ) -合格trueすぐに呼び出された関数式をラップするために参照してください。 #640の詳細については。

その他

あなたによるCANパス--comments ITスタイルでデフォルトの出力は、(IEのための条件付きコンパイル)「@license」または「@cc_on」、コメント「@preserve」を含むJSDocのを維持するコメントに特定の保持することができますによってパス。。 --comments allのみ、この正規表現に一致するコメントを保つために、すべてのコメント、または有効なJavaScriptの正規表現を維持する。例について--comments /^!/のようなコメントを維持します/*! Copyright Notice */

ただし、コメントが失われる場合があることに注意してください。例:

1 2 3 4 5 6 7
function f() { /** @preserve Foo Bar */ function g() { // this function is never called } return something(); }

「@preserve」が含まれていても、内部関数g (コメントが添付されているASTノード)が参照されていないためコンプレッサーによって破棄されるため、コメントは失われます。

著作権情報(または出力に保持する必要のあるその他の情報)を配置する最も安全なコメントは、トップレベルノードに添付されたコメントです。

unsafe compressオプション

これにより、特定の不自然なケースでコードロジックを壊す可能性のあるいくつかの変換が有効になりますが、ほとんどのコードでは問題ないはずです。独自のコードで試してみて、最小サイズを縮小する必要があります。このフラグがオンの場合は次のようになります。

  • new Array(1, 2, 3)またはArray(1, 2, 3)[ 1, 2, 3 ]
  • new Object(){}
  • String(exp)またはexp.toString()"" + exp
  • new Object/RegExp/Function/Error/Array (...) →私たちは捨てnew

Conditional compilation

--define-d )スイッチを使用して、 --defineが定数と見なすグローバル変数を宣言できます(スコープで定義されていない場合)。たとえば、 --define DEBUG=falseを渡すと、デッドコードの削除と組み合わされます。 UglifyJSは、出力から以下を破棄します。

1 2 3
if (DEBUG) { console.log("debug stuff"); }

ネストされた定数は、 --define env.DEBUG=false形式で指定できます。

UglifyJSは、条件が常にfalseであり、到達不能なコードをドロップすることについて警告します。現時点では、この特定の警告のみをオフにするオプションはありません。warnings warnings=falseを渡して、すべての警告をオフにすることができます。

これを行う別の方法は、グローバルを別のファイルで定数として宣言し、それをビルドに含めることです。たとえば、次のようなbuild/defines.jsファイルをbuild/defines.jsできます。

1 2 3
var DEBUG = false; var PRODUCTION = true; // etc.

次のようにコードを作成します。

1
uglifyjs build/defines.js js/foo.js js/bar.js... -c

UglifyJSは定数を認識し、変更できないため、値自体への参照を評価し、通常どおり到達不能なコードをドロップします。これらを使用すると、ビルドにconst宣言が含まれます。<ES6環境をターゲットにしている場合サポートされていないconst使用して、 varしてreduce_vars十分です(デフォルトで有効)。

Conditional compilation API

プログラムAPIを介して条件付きコンパイルを使用することもできます。プロパティ名がglobal_defsであり、コンプレッサープロパティであるという違いがあります。

1 2 3 4 5 6 7 8
var result = UglifyJS.minify(fs.readFileSync("input.js", "utf8"), { compress: { dead_code: true, global_defs: { DEBUG: false } } });

識別子を任意の非定数式に置き換えるには、 global_defsキーの前に"@"を付けて、値を式として解析するようにUglifyJSに指示する必要があります。

1 2 3 4 5 6 7 8
UglifyJS.minify("alert('hello');", { compress: { global_defs: { "@alert": "console.log" } } }).code; // returns: 'console.log("hello");'

それ以外の場合は、文字列リテラルとして置き換えられます。

1 2 3 4 5 6 7 8
UglifyJS.minify("alert('hello');", { compress: { global_defs: { "alert": "console.log" } } }).code; // returns: '"console.log"("hello");'

minify()でネイティブUglifyASTを使用する

1 2 3 4 5 6 7 8 9 10 11 12 13
// example: parse only, produce native Uglify AST var result = UglifyJS.minify(code, { parse: {}, compress: false, mangle: false, output: { ast: true, code: false // optional - faster if false } }); // result.ast contains native Uglify AST
1 2 3 4 5 6 7 8 9 10 11 12 13 14
// example: accept native Uglify AST input and then compress and mangle // to produce both code and native AST. var result = UglifyJS.minify(ast, { compress: {}, mangle: {}, output: { ast: true, code: true // optional - faster if false } }); // result.ast contains native Uglify AST // result.code contains the minified code in string form.

Working with Uglify AST

ネイティブASTのトランスバーサルと変換は、それぞれTreeWalkerTreeTransformer介して実行できます。

ESTree / SpiderMonkey AST

UglifyJSには独自の抽象構文ツリー形式があります。実際的な理由から、SpiderMonkey ASTを内部で使用するように簡単に変更することはできません。ただし、UglifyJSには、SpiderMonkeyASTをインポートできるコンバーターがあります。

たとえば、 Acornは、SpiderMonkey ASTを生成する超高速パーサーです。1つのファイルを解析し、ASTをJSONで標準出力にダンプする小さなCLIユーティリティがあります。UglifyJSを使用してそれをマングルおよび圧縮するには:

1
acorn file.js | uglifyjs -p spidermonkey -m -c

-p spidermonkeyオプションは、すべての入力ファイルがJavaScriptではなく、JSONのSpiderMonkey ASTで記述されたJSコードであることをUglifyJSに通知します。したがって、この場合は独自のパーサーを使用せず、そのASTを内部ASTに変換するだけです。

Use Acorn for parsing

さらに楽しくするために、Acornを使用してすべての解析を行う-p acornオプションを追加しました。このオプションを渡すと、UglifyJSはrequire("acorn")ます。

Acornは非常に高速です(たとえば、一部の650Kコードでは380msではなく250ms)が、Acornが生成するSpiderMonkeyツリーの変換にはさらに150msかかるため、UglifyJS独自のパーサーを使用するよりも少し多くなります。

Uglify Fast Minify Mode

よく知られていませんが、空白の削除とシンボルのマングリングは、ほとんどのJavaScriptの縮小コードのサイズ縮小の95%を占めており、複雑なコード変換ではありません。 compressを無効にするだけで、Uglifyのビルドを3〜4倍高速化できます。 mangleのみのモードUglifyは、 butternut匹敵する最小化速度とgzipサイズを備えています。

d3.jsサイズを小さくするgzipサイズ時間の最小化(秒)
元の451,131 108,733 -
uglify-js@3.0.24 mangle = false、compress = false 316,600 85,245 0.70
uglify-js@3.0.24 mangle = true、compress = false 220,216 72,730 1.13
butternut@0.4.6 217,568 72,738 1.41
uglify-js@3.0.24 mangle = true、compress = true 212,511 71,560 3.36
babili@0.1.4 210,713 72,140 12.64

CLIから高速ミニファイモードを有効にするには、次を使用します。

1
uglifyjs file.js -m

APIを使用して高速ミニファイモードを有効にするには:

1
UglifyJS.minify(code, { compress: false, mangle: true });

ソースマップとデバッグ

コードを単純化、再配置、インライン化、および削除するさまざまなcompress変換は、ソースマップを使用したデバッグに悪影響を与えることが知られています。これは、コードが最適化され、一部のコードが存在しなくなったためにマッピングが不可能になることが多いため、予想されます。ソースマップのデバッグでは、Uglify compressオプションを無効にし、 mangle使用します。

Compiler assumptions

より良い最適化を可能にするために、コンパイラはさまざまな仮定を行います。

  • .toString()および.valueOf()は副作用がなく、組み込みオブジェクトの場合、これらはオーバーライドされていません。
  • undefinedNaNおよびInfinityは外部で再定義されていません。
  • arguments.calleearguments.callerFunction.prototype.callerは使用されません。
  • このコードは、 Function.prototype.toString()またはError.prototype.stack内容が特に何かであることを期待していません。
  • プレーンオブジェクトのプロパティを取得および設定しても、他の副作用は発生しません( .watch()またはProxy )。
  • Object properties can be added 、削除、および変更Object properties can be addedObject.defineProperty()Object.defineProperties()Object.freeze()Object.preventExtensions()またはObject.seal()防止できません)。