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

UglifyJS 3

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

ノート:

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

インストール

まず、最新バージョンの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)。

追加オプション:

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

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

  • --source-map "url='<URL>'"ソースマップを見つけることができるURLを指定します。それ以外の場合、UglifyJSはHTTPX-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.jsとはfile2.js、出力低下するfoo.min.jsに、ソースマップをfoo.min.js.map。ソースマッピングはを参照するhttp://foo.com/src/js/file1.jshttp://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"ソースマップがソースとインラインで含まれている場合。

CLI圧縮オプション

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

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

例:

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

CLIマングルオプション

マングラーを有効にするには、--mangle-mを渡す必要があります。次の(カンマ区切りの)オプションがサポートされています。

  • toplevel(デフォルトfalse)-最上位スコープで宣言されたマングル名。

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

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

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

requireexportsおよび$名前が変更されないようにします。

CLIマングリングプロパティ名(--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 regex=/^_/マングルするプロパティ名を定義できます。たとえば、アンダースコアで始まるプロパティ名のみをマングルします。

このオプションを使用して複数のファイルを圧縮する場合、それらが最終的に連携するためには、何らかの方法で1つのプロパティがすべてのファイルで同じ名前に--name-cache filename.json マングルされるようにする必要があります。このために、passと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.js及びpart2.jsマングルされたプロパティ名の面で互いに矛盾になります。

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

引用符で囲まれていない名前のマングリング(--mangle-props keep_quoted

引用符で囲まれたプロパティ名(o["foo"]を使用すると、プロパティ名()が予約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_ます。スクリプトをコンパイルするたびにこれを変更して、プロパティがどのようにマングルさたかを特定できます。1つの手法は、コンパイルごとに乱数を渡して、異なるマングリングの変更をシミュレートすることです。入力(たとえば、入力スクリプトを新しいプロパティで更新するとき)、およびマングルされたキーをストレージに書き込むなどの間違いを特定するのに役立ちます。

APIリファレンス

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

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

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

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}

あなたはできるminify複数のキーは、ファイル名と値であり、第一引数のオブジェクトを使用して、一度に一つのJavaScriptファイルよりソースコードです:

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 3.x` APIとは異なり、APIはエラーをスローしません。同様の効果を実現するには、次のようにします。

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してマングル名をスキップするか、オブジェクトを渡してマングルオプションを指定します(以下を参照)。

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

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

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

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

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

  • keep_fnames(デフォルト:false)-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.mapのみ使用さ result.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代わりにヘッダーを使用している場合は、を省略できますsourceMap.url

解析オプション

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

  • html5_comments(デフォルトtrue

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

圧縮オプション

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

  • booleans(デフォルトtrue:)-ブールコンテキストのさまざまな最適化、たとえば!!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)

  • conditionals(デフォルトtrue:)- ifsおよび条件式に最適化を適用します

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

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

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

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

  • expression(デフォルト:)false-ブックマークレットなどのtrueないターミナルステートメントからの完了値を保持するために渡しreturnます。

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

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

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

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

  • if_return(デフォルトtrue:)-if / 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 mangleオプション

  • keep_infinity(デフォルト:)false-に圧縮されtrueないようにパスます。これにより、Chromeでパフォーマンスの問題が発生する可能性があります。Infinity1/0

  • loops(デフォルトtrue:)-の最適化dowhileおよびfor条件を静的に決定できる場合はループします。

  • negate_iife(デフォルトtrue:)-コードジェネレーターが挿入する親を避けるために、戻り値が破棄される「即時呼び出し関数式」を否定します

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

  • properties(デフォルトtrue:)-たとえば、ドット表記を使用してプロパティアクセスを書き換えます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 下の記号も下mangle.reservedにあることを確認てください。

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

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

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

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

  • side_effects(デフォルト:)true- false「純粋」とマークされた潜在的にドロップする関数を無効にするためにパスます。コメント注釈/*@__PURE__*/または/*#__PURE__*/呼び出しの直前の場合、関数呼び出しは「純粋」としてマークされます。例:/*@__PURE__*/foo();

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

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

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

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

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

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

  • unsafe_Function(デフォルトfalse:)-が文字列リテラルのFunction(args, code) 場合、圧縮とマングルargscode

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

  • unsafe_proto(デフォルトfalse:) -のような最適化の表現 Array.prototype.slice.call(a)[].slice.call(a)

  • unsafe_regexp(デフォルトfalse:)-RegExp定数である場合と同じ方法で、変数を値に置き換えることができ ます

  • unsafe_undefined(デフォルトfalse:)-スコープ内に名前がvoid 0付けられた変数がある場合は置換undefinedします(変数名はマングルされ、通常は1文字に縮小されます)

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

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

マングルオプション

  • eval(デフォルトfalse)-またはが使用さtrueれているスコープに表示されるマングル名に渡しますevalwith

  • keep_fnames(デフォルトfalse)-true関数名をマングルしないように渡します。依存するコードに役立ちますFunction.prototype.name。関連項目:keep_fnames 圧縮オプション

  • reserved(デフォルトでは[]) -パスANはマングリングが:.例から除外されていることを識別子の万一の配列であること["foo", "bar"]

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

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

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

  • regex(デフォルトnull:)-正規表現に一致するプロパティ名のみにRegExpリテラルを渡します

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

出力オプション

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

  • ascii_only(デフォルトfalse)-文字列および正規表現内のUnicode文字をエスケープします(ASCII以外の文字が無効になるディレクティブに影響します)

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

  • braces(デフォルトではfalse) - INSERTの括弧内は、必ずiffordowhileまたはwithステートメントが、でも自分の体は、A SINGLE IF文です。

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

  • indent_level(デフォルト4

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

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

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

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

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

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

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

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

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

  • shebang(デフォルトtrue)-#!プリアンブルでシバン保持する(bashスクリプト)

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

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

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

その他

あなたは渡すことができ--comments、出力で特定のコメントを保持する。デフォルトでは、それは「@preserve」、「@license」または「@cc_on」(IEの条件付きコンパイル)を含有する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)スイッチを使用して、UglifyJSが定数と見なすグローバル変数を宣言できますスコープで定義されていない場合)。たとえば、それを渡す--define DEBUG=falseと、デッドコードの削除と相まって、UglifyJSは出力から次のものを破棄します。

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

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

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

これを行う別の方法は、グローバルを別のファイルで定数として宣言し、それをビルドに含めることです。たとえば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します。これらを使用すると、ビルドに宣言が含まれます。サポートしていませconst使用して、varreduce_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");'

ネイティブのUglifyASTを minify()

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のトランスバーサルと変換は、 それぞれTreeWalkerを介して実行できます TreeTransformer

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

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

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

Uglify Fast Minify Mode

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

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
バターナッツ@ 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コードを単純化、再配置、インライン化、削除するさまざまな変換は、ソースマップを使用したデバッグに悪影響を与えることが知られています。これは、コードが最適化され、一部のコードが存在しなくなったためにマッピングが不可能になることが多いためです。マップのデバッグでは、Uglifycompressオプションを無効にして、を使用しますmangle

Compiler assumptions

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

  • .toString()そして.valueOf()副作用を持っていない、と組み込みオブジェクトのために、彼らは上書きされていません。
  • undefinedNaNおよびInfinity外部で再定義されていません。
  • arguments.calleearguments.callerおよびFunction.prototype.callerは使用されません。
  • コードは、の内容Function.prototype.toString()Error.prototype.stack特定のものであることを期待していません
  • プレーンオブジェクトのプロパティを取得および設定しても、他の副作用は発生しません(.watch()またはを使用Proxy)。
  • 除去および変更されたプロパティオブジェクトを追加することができる(と妨げられない Object.defineProperty()Object.defineProperties()Object.freeze()Object.preventExtensions()またはObject.seal())。