UglifyJS 3

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

注記：

• uglify-js@3には、 との下位互換性がない、簡略化されたAPIとCLIがありますuglify-js@2。
• UglifyJS リリースのドキュメントは、ここに2.xあります。
• uglify-jsJavaScript (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( )を指定します。それ以外の場合は、出力は STDOUT に送られます。-o

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.jshttp://foo.com/srcjs/file1.jsjs/file2.js

Composed source map

CoffeeScript などのコンパイラによって出力された JS コードを圧縮する場合、JS コードへのマッピングはあまり役に立ちません。代わりに、元のコード (つまり CoffeeScript) にマッピングし直す必要があります。 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スコープで表示されるマングル名。evalwith

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

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

requireとexportsの名前が変更されないようにします$。

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 つのプロパティがすべてのファイルで同じ名前にマングルされるようにする必要があります。このため、 pass--name-cache filename.json と UglifyJS はこれらのマッピングを 1 つの形式で維持します。このファイルは再利用できます。最初は空である必要があります。例:

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.foo マングルされo._$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.foo。o._$foo$XYZ_スクリプトをコンパイルするたびにこれを変更して、プロパティがどのようにマングルされたかを識別できます。1 つのテクニックは、コンパイルのたびに乱数を渡し、さまざまなマングルの変更をシミュレートすることです。 (新しいプロパティで入力スクリプトを更新するときなど)、壊れたキーをストレージに書き込むなどの間違いを特定するのに役立ちます。

APIリファレンス

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

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

単一の高レベル関数 があります。これは、すべての縮小フェーズを構成可能な方法でminify(code, options)実行します。デフォルトでは、オプション とが有効になります。例: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}

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、3.xAPI はエラーをスローしません。同様の効果を得るには、次のようにすることができます。

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

縮小オプション

• warnings(default false) —trueに渡してコンプレッサーの警告を返しますresult.warnings。"verbose"より詳細な警告を表示するには、この値を使用します。

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

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

• mangle(default true) — マングル名をスキップするために渡すか、マングル オプションをfalse指定するためにオブジェクトを渡します(以下を参照)。

  • mangle.properties(デフォルトfalse) — マングル オプションのサブカテゴリ カスタムマングル プロパティ オプションを指定するオブジェクトを渡します。

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

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

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

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

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) -- 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);。注:有効、オプションが1 以上に設定され、オプションが有効な場合にhoist_props 最適に機能します。manglecompresspasses2compresstoplevel

• 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 マングル オプションも参照してください。

• keep_infinity(デフォルト: false) -- に圧縮されるのをtrue防ぐために渡します。圧縮すると、Chrome でパフォーマンスの問題が発生する可能性があります。Infinity1/0

• loops(デフォルト: true) -- の最適化do、whileおよび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") -- これを渡すと、UglifyJS はオブジェクト プロパティ アクセス (例または) に副作用がないものtrueとみなします。スローしないことが確実な場合、つまりスローしない場合にのみ副作用なしとして 扱うように指定します。または。foo.barfoo["bar"]"strict"foo.barfoonullundefined

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

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

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

• side_effects(デフォルト: true) -- 「純粋」としてマークされた関数が削除される可能性を無効にする場合に渡します。コメント注釈が付いている場合、または呼び出しの直前にあるfalse関数呼び出しは「純粋」としてマークされます。例:/*@__PURE__*//*#__PURE__*//*@__PURE__*/foo();

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

• toplevel(デフォルト: false) --最上位スコープ内の未参照の関数 ( "funcs") および/または変数 ( ) を削除します (デフォルトでは、未参照の関数と変数の両方を削除します)。"vars"falsetrue

• top_retain(デフォルト: null) -- 特定のトップレベル関数と変数がunused削除されないようにします (配列、カンマ区切り、RegExp、または関数を使用できます。暗黙的に指定されます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(デフォルト: ) -- into のfalseような数値式を最適化します 。これにより、不正確な浮動小数点の結果が得られる可能性があります。2 * x * 36 * x

• unsafe_proto(デフォルト: false) -- Array.prototype.slice.call(a)into のような式を最適化します。[].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(デフォルト[]) -- マングリングから除外する識別子の配列を渡します。例: ["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) -- if、for、 do、whileまたはwithステートメントには、本文が 1 つのステートメントであっても、常に中かっこを挿入します。

• 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-- 二重引用符を優先し、文字列自体にさらに二重引用符がある場合は一重引用符に切り替えます。gzip0サイズに最適です。
  • 1-- 常に一重引用符を使用してください
  • 2-- 常に二重引用符を使用してください
  • 3-- 常に元の引用符を使用してください

• semicolons(デフォルトtrue) -- ステートメントをセミコロンで区切ります。パスすると、false可能な限りセミコロンの代わりに改行が使用され、醜化されたコードの出力がより読みやすくなります (gzip 前のサイズは小さくなる可能性がありますが、gzip 後のサイズはわずかに大きくなります)。

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

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

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

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

その他

Keeping copyright notices or other comments

出力に特定のコメントを保持するために渡すことができます--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();
}

g"@preserve" が付いているにもかかわらず、内部関数(コメントが添付されている 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( ) スイッチを使用できます。たとえば、これを渡すと、デッド コードの削除と組み合わせて、UglifyJS は出力から次のものを破棄します。-d--define DEBUG=false

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。ES6 未満の環境をターゲットにしている場合は、はサポートされていないためconst、varwith 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
        }
    }
});

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

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 ではなく、JSON 内の SpiderMonkey AST で記述された JS コードであることを UglifyJS に伝えます。したがって、この場合、独自のパーサーは使用せず、その AST を内部 AST に変換するだけです。

Use Acorn for parsing

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

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

Uglify Fast Minify Mode

あまり知られていませんが、ほとんどの JavaScript の縮小コードのサイズ削減の 95% は空白の削除とシンボルのマングリングであり、複雑なコード変換ではありません。無効にするだけで、compressUglify のビルドを 3 ～ 4 倍高速化できますmangle。唯一のモード Uglify は、以下と同等の minify 速度と gzip サイズを備えています butternut。

CLI から高速縮小モードを有効にするには、次のコマンドを使用します。

1
uglifyjs file.js -m

API を使用して高速縮小モードを有効にするには、以下を使用します。

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

ソースマップとデバッグ

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

Compiler assumptions

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

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