醜いJS 3
UglifyJS は、JavaScript パーサー、縮小化、圧縮、美化ツールキットです。
ノート:
uglify-js@3
には、 との下位互換性がない簡素化されたAPIとCLIがありますuglify-js@2
。- UglifyJS リリースのドキュメントは、ここに
2.x
あります。 uglify-js
JavaScript (ECMAScript 5) のみをサポートします。- ECMAScript 2015 以降を縮小するには、Babelなどのツールを使用してトランスパイルします。
インストール
まず、最新バージョンのnode.jsがインストールされていることを確認します (この手順の後でコンピューターを再起動する必要がある場合があります)。
コマンド ライン アプリとして使用する NPM から:
1npm install uglify-js -g
プログラムで使用するための NPM から:
1npm install uglify-js
コマンドラインの使用法
1uglifyjs [input files] [options]
UglifyJS は複数の入力ファイルを受け取ることができます. 最初に入力ファイルを渡し、次にオプションを渡すことをお勧めします. UglifyJS は入力ファイルを順番に解析し、圧縮オプションを適用します. ファイルは同じグローバル スコープ、つまり参照で解析されますファイルから別のファイルで宣言された変数/関数への変換は、適切に一致します。
入力ファイルが指定されていない場合、UglifyJS は STDIN から読み取ります。
入力ファイルの前にオプションを渡したい場合は、入力ファイルがオプションの引数として使用されないように、2 つを二重ダッシュで区切ります。
1uglifyjs --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
3uglifyjs js/file1.js js/file2.js \
-o foo.min.js -c -m \
--source-map "root='http://foo.com/src',url='foo.min.js.map'"
The above will compress and mangle file1.js
and file2.js
, will drop the output in foo.min.js
and the source map in . ソース マッピングはand
foo.min.js.map
を参照します(実際には
ソース マップ ルートとしてリストされ、元のファイルはand
としてリストされます)。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
、または単にfoo
(後者は、設定したいブール値のオプションを意味しますtrue
。これは実質的に のショートカットですfoo=true
)。
例:
1uglifyjs file.js -c toplevel,sequences=false
CLIマングルオプション
To enable the mangler you need to pass --mangle
( -m
). 次の (カンマ区切り) オプションがサポートされています:
toplevel
(デフォルトfalse
) -- 最上位スコープで宣言されたマングル名。eval
(デフォルト) --または が使用されているfalse
スコープで表示されるマングル名。eval
with
マングリングが有効になっているが、特定の名前がマングルされるのを防ぎたい場合は、それらの名前を次のように宣言できます--mangle reserved
—カンマで区切られた名前のリストを渡します. 例:
1uglifyjs ... -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
1var 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_]
1var 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=/_$/
1var x={o:0,_:1,calc:function(){return this._+this.o}};x.l=2,x.o=3,console.log(x.calc());
mangle プロパティ オプションの組み合わせ:
1$ uglifyjs example.js -c -m --mangle-props regex=/_$/,reserved=[bar_]
1var 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
この機能を無効にするには、 を渡します。
A regular expression can be used to define which property names should be mangled. たとえば、--mangle-props regex=/^_/
アンダースコアで始まるプロパティ名のみをマングルします。
このオプションを使用して複数のファイルを圧縮する場合、最終的にそれらが一緒に機能するためには、1 つのプロパティがすべてのファイルで同じ名前にマングルされるようにする必要があります--name-cache filename.json
。このファイルは後で再利用できます. 最初は空である必要があります. 例:
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
1var 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
1var o={_$foo$_:1,_$bar$_:3};o._$foo$_+=o._$bar$_,console.log(o._$foo$_);
You can also pass a custom suffix using --mangle-props debug=XYZ
. This would then mangle o.foo
to o._$foo$XYZ_
. You can change this every time you compile a script to identify how a property got mangled. 1 つの手法は、コンパイルごとに乱数を渡して、異なる入力 (たとえば、入力スクリプトを新しいプロパティで更新するとき) や、破損したキーをストレージに書き込むなどの間違いを特定するのに役立ちます。
API リファレンス
NPM 経由のインストールを想定すると、次のように UglifyJS をアプリケーションにロードできます。
1var UglifyJS = require("uglify-js");
構成可能な方法ですべての縮小フェーズminify(code, options)
を実行する単一の高レベル関数 があります. デフォルトでは、オプション
および が有効になります. 例:minify()
compress
mangle
1
2
3
4var 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
7var 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
8var 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
16var 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
16var 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
21var 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
6var 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
3var 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.x
API はエラーをスローしません。同様の効果を得るには、次のようにします。
1
2var result = UglifyJS.minify(code, options);
if (result.error) throw result.error;
縮小オプション
warnings
(デフォルトfalse
) — パスでtrue
コンプレッサーの警告を返しますresult.warnings
."verbose"
より詳細な警告を表示するには、この値を使用します.parse
(デフォルト) — 追加の解析オプション{}
を指定する場合は、オブジェクトを渡します。compress
(default{}
) —false
圧縮を完全にスキップするために渡します.オブジェクトを渡して、カスタムの圧縮オプションを指定します.mangle
(defaulttrue
) — 渡してfalse
マングル名をスキップするか、オブジェクトを渡してマングル オプションを指定します(以下を参照)。mangle.properties
(defaultfalse
) — mangle オプションのサブカテゴリ. オブジェクトを渡して、カスタムmangle プロパティ optionsを指定します。
output
(default ) — 追加の出力オプションnull
を指定する場合はオブジェクトを渡します. デフォルトは最適な圧縮のために最適化されています.sourceMap
(デフォルト) -ソース マップ オプションをfalse
指定する場合は、オブジェクトを渡します 。toplevel
(デフォルトfalse
) -true
トップレベルの変数名と関数名のマングリングを有効にし、未使用の変数と関数を削除する場合は に設定します。nameCache
(デフォルト) -の複数回の呼び出しでマングルされた変数名とプロパティ名をキャッシュする場合は、null
空のオブジェクト{}
または以前に使用されたオブジェクトを渡します。注: これは読み取り/書き込みプロパティです。このオブジェクトの名前キャッシュ状態を読み取り、更新します縮小中に、ユーザーが再利用したり、外部で永続化したりできるようにします。nameCache
minify()
minify()
ie8
(デフォルトfalse
) -true
IE8 をサポートするように設定されています。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
8var 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
6var 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
7var 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
防ぐために渡します。Infinity
1/0
loops
(デフォルト:true
) -- の最適化do
、while
およびfor
条件を静的に決定できる場合のループ。negate_iife
(デフォルト:true
) -- コード ジェネレーターが挿入する括弧を避けるために、戻り値が破棄される「即時呼び出し関数式」を無効にします。passes
(デフォルト:1
) -- 圧縮を実行する最大回数. 場合によっては、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"
) -- If you passtrue
for this, UglifyJS will assume that object property access (egfoo.bar
orfoo["bar"]
) has no side Effects. がスローしないことが確実な場合のみ、副作用のないものとして"strict"
扱うように指定します。または。foo.bar
foo
null
undefined
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__*/
呼び出しの直前にある場合、「pure」とマークされます。例:/*@__PURE__*/foo();
switches
(デフォルト:true
) -- 重複を排除し、到達不能なswitch
ブランチを削除しますtoplevel
(デフォルト:false
) -- 参照されていない関数 ("funcs"
) および/または変数 ("vars"
) を最上位スコープで削除します (false
デフォルトでは、true
参照されていない関数と変数の両方を削除します)。top_retain
(デフォルト:null
) -- 特定のトップレベルの関数と変数がunused
削除されないようにします (配列、カンマ区切り、正規表現、または function. Implies を指定できます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)
の場合、圧縮してマングルします。args
code
unsafe_math
(デフォルト: ) -- into のfalse
ような数値式を最適化します 。浮動小数点の結果が不正確になる可能性があります。2 * x * 3
6 * 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
スコープで表示される mangle 名に渡します。eval
with
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
10var 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
(defaulttrue
) -- 実際に出力を美しくするかどうか. 渡すとこれが true に設定されますが、追加の引数を指定するために、縮小されたコードを生成する場合でも-b
渡す必要がある場合があるため、を使用してオーバーライドできます。-b
-b beautify=false
braces
(デフォルトfalse
) --本体が単一のステートメントであっても、常に、、、、if
またはfor
ステートメント に中かっこを挿入します。do
while
with
comments
(デフォルトfalse
) --すべてのコメントを保持するにはtrue
orを渡し、一部のコメント、正規表現文字列 (例: ) または関数を保持します。"all"
"some"
/^!/
indent_level
(デフォルト4
)indent_start
(デフォルト0
) -- すべての行の前にその数のスペースを追加しますinline_script
(デフォルト) --文字列内true
の HTML コメントとスラッシュをエスケープします。</script>
keep_quoted_props
(デフォルトfalse
) -- オンにすると、オブジェクト リテラルのプロパティ名から引用符が削除されなくなります。max_line_len
(デフォルトfalse
) -- 行の最大長 (醜いコードの場合)preamble
(デフォルトnull
) -- when passed it must be a string and it will prepended to the outputliterally. The source map will adjust for this text. たとえば、ライセンス情報を含むコメントを挿入するために使用できます。preserve_line
(デフォルトfalse
) --true
行を保持するために渡しますが、 がbeautify
に設定されている場合にのみ機能しますfalse
。quote_keys
(デフォルトfalse
) --true
リテラル オブジェクト内のすべてのキーを引用するために渡しますquote_style
(デフォルト0
) -- 文字列の優先引用スタイル (引用されたプロパティ名とディレクティブにも影響します):0
-- 二重引用符を優先し、文字列自体に複数の二重引用符がある場合は単一引用符に切り替えます0
。1
-- 常に一重引用符を使用します2
-- 常に二重引用符を使用します3
-- 常に元の引用を使用する
semicolons
(defaulttrue
) -- ステートメントをセミコロンで区切ります。渡すと、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
7function 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
--define
( -d
) スイッチを使用して、UglifyJS が定数であると想定するグローバル変数を宣言するために使用できます(--define DEBUG=false
スコープ内で定義されていない場合)。
1
2
3if (DEBUG) {
console.log("debug stuff");
}
の形式でネストされた定数を指定できます--define env.DEBUG=false
。
UglifyJS は、条件が常に false であり、到達不能なコードをドロップすることについて警告します; 現在のところ、この特定の警告のみをオフにするオプションはありません。すべての警告をwarnings=false
オフにするために渡すことができます。
別のファイルでグローバルを定数として宣言し、それをビルドに含めることもできます。たとえば、
build/defines.js
次のようなファイルを作成できます。
1
2
3var DEBUG = false;
var PRODUCTION = true;
// etc.
次のようにコードをビルドします。
1uglifyjs build/defines.js js/foo.js js/bar.js... -c
UglifyJS will notice the constants and, since they can't be changed, it will evaluate references to them to the value own and drop unreachable code as通常. 使用する場合、ビルドには宣言が含まれます. ES6 未満の環境をターゲットにしているconst
場合with (デフォルトで有効)const
を使用するだけで十分です。var
reduce_vars
Conditional compilation API
global_defs
You can also use conditional compilation via the programmatic API. プロパティ名が圧縮プロパティであるという違いがあります。
1
2
3
4
5
6
7
8var 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
8UglifyJS.minify("alert('hello');", {
compress: {
global_defs: {
"@alert": "console.log"
}
}
}).code;
// returns: 'console.log("hello");'
それ以外の場合は、文字列リテラルとして置き換えられます。
1
2
3
4
5
6
7
8UglifyJS.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 つのファイルを解析し、AST を JSON 形式で標準出力にダンプする小さな CLI ユーティリティがあります. UglifyJS を使用してそれをマングルして圧縮するには:
1acorn 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
あまり知られていませんが、ほとんどの JavaScript では、縮小されたコードのサイズ削減の 95% を空白の削除とシンボルのマングリングが占めています (精巧なコード変換ではありません) Uglify のビルドを 3 倍から 4 倍高速化するには、単純に無効にすることができcompress
ます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 |
バビリ@0.1.4 | 210,713 | 72,140 | 12.64 |
CLI から高速縮小モードを有効にするには、次を使用します。
1uglifyjs file.js -m
API を使用して高速縮小モードを有効にするには:
1UglifyJS.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()
)。