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

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.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"ソース マップがソースとインラインで含まれている場合。

CLI 圧縮オプション

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

オプションはfoo=bar、または just 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._());

a に一致するすべてのプロパティをマングルします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 マングルされるようにする必要があります。このために、パスと 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_ます. スクリプトをコンパイルするたびにこれを変更して、プロパティがどのようにマングルさたかを識別することができます.入力 (たとえば、入力スクリプトを新しいプロパティで更新するとき) や、破損したキーをストレージに書き込むなどの間違いを特定するのに役立ちます。

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

    • mangle.properties(デフォルトfalse) — mangle オプションのサブカテゴリ オブジェクトを渡して、カスタムmangle プロパティ optionsを指定します
  • output(デフォルトnull) — 追加の出力オプションを指定したい場合はオブジェクトを渡します. デフォルトは最適な圧縮のために最適化されています.

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

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

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

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

  • 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を be に設定すると"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:) - if-s および条件式の最適化を適用します

  • 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_props で最高の作品mangleが有効、compressオプションpassesにセット2以上、およびcompressオプションがtoplevel有効になって。

  • 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- Chrome でパフォーマンスの問題を引き起こす可能性のあるに圧縮されるのtrueを防ぐために渡しますInfinity1/0

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

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

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

  • 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副作用のないようにのみ foo、すなわち、投げたりしないことが確実ではありませんnullundefined.

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

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

  • sequences(デフォルトtrue:) - コンマ演算子を使用して連続する単純なステートメントを結合します. 生成される連続したコンマ シーケンスの最大数を指定するには、正の整数に設定することができます. このオプションが に設定されている true場合、デフォルトのsequences制限は200です。falseまたは0 無効にします. 最小のsequences長さは2です. のsequences値は1 と同等で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注意:この値を設定することをお勧めしますfalseIE10とによる既知の問題とそれ以前のバージョンのために。

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

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

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

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

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

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

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

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

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

マングルオプション

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

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

  • reserved(デフォルト[]) - マングリングが例から除外される識別子の配列を AN BE に渡す必要があります["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ステートメントで、それらの本体も 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

(スコープで定義されていない限り) UglifyJS が定数であると想定するグローバル変数を宣言するために--define( -d) スイッチを使用できます。たとえば、それを渡す--define DEBUG=falseと、デッド コードの削除と相まって、UglifyJS は出力から次を破棄します。

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

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

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

これを行うもう 1 つの方法は、グローバルを定数として別のファイルで宣言し、それをビルドに含めることです。たとえば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");'

ネイティブ Uglify AST を使用する 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 には SpiderMonkey AST をインポートできるコンバーターがあります。

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

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

この-p spidermonkeyオプションは、すべての入力ファイルが JavaScript ではなく、SpiderMonkey AST で JSON で記述された 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 はよく知られていませんが、空白の削除とシンボルのマングリングが at の 95% を占めます MOST JavaScript の縮小コードの削減 -. 精巧なコードではない TRANSFORMS One は無効にcompressするだけでUglify ビルドを 3 ~ 4 倍高速化できますこれは FAST. 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())。