UglifyJS 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에서 읽습니다.
입력 파일보다 먼저 옵션을 전달하려면 입력 파일이 옵션 인수로 사용되는 것을 방지하기 위해 두 개를 이중 대시로 구분하세요.
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
( )를 지정하고 , 그렇지 않으면 출력이 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는 HTTP가X-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'"
file1.js
위의 내용은 and 를 압축 및 변조하고 출력을 에 삭제 하고 소스 맵을 에 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)로 다시 매핑하고 싶을 것입니다. 입력 소스 맵을 가져오는 옵션 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 맹글 옵션
--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());
모든 속성을 Mangle하십시오(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._());
다음과 일치하는 모든 속성을 Mangle 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());
맹글 속성 옵션 결합:
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
재정의).
다양한 브라우저에 정의된 대부분의 표준 JS 및 DOM 속성을 포함 하는 기본 제외 파일이 제공됩니다 tools/domprops.json
.
--mangle-props domprops
이 기능을 비활성화하려면 전달하세요.
정규식을 사용하여 어떤 속성 이름을 변경해야 하는지 정의할 수 있습니다. 예를 들어 --mangle-props regex=/^_/
밑줄로 시작하는 속성 이름만 변경합니다.
이 옵션을 사용하여 여러 파일을 압축할 때 결국 함께 작동하려면 하나의 속성이 모든 파일에서 동일한 이름으로 손상되도록 해야 합니다. 이를 위해 pass --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에 대한 단일 호출로 모든 파일을 압축하는 경우 이름 캐시를 사용할 필요가 없습니다.
인용되지 않은 이름 맹글링( --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$_);
를 사용하여 사용자 정의 접미사를 전달할 수도 있습니다 --mangle-props debug=XYZ
. 그러면 o.foo
로 o._$foo$XYZ_
변경됩니다. 속성이 어떻게 변경되었는지 식별하기 위해 스크립트를 컴파일할 때마다 이를 변경할 수 있습니다. 한 가지 기술은 컴파일할 때마다 임의의 숫자를 전달하여 다른 방법으로 변경하는 변경을 시뮬레이션하는 것입니다. 입력(예: 새 속성으로 입력 스크립트를 업데이트할 때) 및 저장소에 잘못된 키를 쓰는 것과 같은 실수를 식별하는 데 도움이 됩니다.
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
API 3.x
는 오류를 발생시키지 않습니다. 비슷한 효과를 얻으려면 다음을 수행할 수 있습니다.
1
2var 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
) -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
있으며 "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/statement를 사용하여 함수에 대한 인라인 호출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에서 성능 문제가 발생할 수 있습니다.Infinity
1/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.bar
foo["bar"]
"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
제거되지 않도록 방지합니다(배열, 쉼표로 구분, 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)
합니다 .args
code
unsafe_math
(기본값:false
) -2 * x * 3
into 와 같은 수치 표현식을 최적화합니다6 * x
. 이는 부정확한 부동 소수점 결과를 제공할 수 있습니다.unsafe_proto
(기본값:false
) --Array.prototype.slice.call(a)
into 와 같은 표현식을 최적화합니다.[].slice.call(a)
unsafe_regexp
(기본값: ) - 마치 상수인 것처럼false
변수를 값으로 대체할 수 있습니다 .RegExp
unsafe_undefined
(기본값:false
) -- 범위에void 0
이름이 지정된 변수가 있으면 대체합니다undefined
(변수 이름은 엉망이 되며 일반적으로 한 문자로 줄어듭니다).unused
(기본값:true
) -- 참조되지 않은 함수 및 변수를 삭제합니다. (로 설정하지 않는 한 단순 직접 변수 할당은 참조로 계산되지 않습니다."keep_assign"
)warnings
(기본값:false
) -- 연결할 수 없는 코드나 사용하지 않는 선언 등을 삭제할 때 경고를 표시합니다.
맹글 옵션
eval
(기본값false
) - 또는가 사용되는true
범위에 표시되는 맹글 이름으로 전달됩니다 .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
) -- 문자열 및 정규식에서 유니코드 문자를 이스케이프합니다(ASCII가 아닌 문자가 유효하지 않게 되는 지시어에 영향을 줌).beautify
(기본값true
) -- 실제로 출력을 아름답게 할지 여부 전달하면-b
true로 설정되지만,-b
축소된 코드를 생성하려는 경우에도 추가 인수를 지정하여-b beautify=false
재정의하는 데 사용할 수 있도록 전달해야 할 수도 있습니다.braces
( 기본값false
) - 본문이 단일 문인 경우에도 항상if
,for
,do
또는 문에 중괄호를 삽입합니다.while
with
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
) - 세미콜론으로 명령문을 구분합니다. then을 전달하면false
가능할 때마다 세미콜론 대신 개행 문자를 사용하여 보기 흉한 코드를 더 읽기 쉽게 출력합니다(gzip 이전 크기는 더 작을 수 있고, gzip 이후 크기는 약간 더 커질 수 있음).shebang
(기본값true
) -#!
서문에 shebang을 유지합니다(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의 --comments all
조건부 컴파일)을 포함하는 JSDoc 스타일 주석을 유지합니다. 주석 또는 유효한 JavaScript 정규 표현식을 사용하여 이 정규 표현식과 일치하는 주석만 유지합니다. 예를 들어 --comments /^!/
다음과 같은 주석을 유지합니다 /*! Copyright Notice */
.
그러나 주석이 손실되는 상황이 있을 수 있습니다. 예를 들면 다음과 같습니다.
1
2
3
4
5
6
7function 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
( ) 스위치를 사용할 수 있습니다 (범위에 정의되지 않은 경우). 예를 들어 통과 하면 데드 코드 제거와 함께 UglifyJS는 출력에서 다음을 삭제합니다.-d
--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는 상수를 알아차리고 변경할 수 없기 때문에 값 자체에 대한 참조를 평가하고 평소와 같이 도달할 수 없는 코드를 삭제합니다. const
사용하는 경우 빌드에 선언이 포함됩니다. < ES6 환경을 대상으로 하는 경우 지원하지 않는 경우 with (기본적으로 활성화됨)를 const
사용하면 충분합니다.var
reduce_vars
Conditional compilation API
프로그래밍 방식 API를 통해 조건부 컴파일을 사용할 수도 있습니다. 속성 이름이 global_defs
압축기 속성이라는 차이점이 있습니다.
1
2
3
4
5
6
7
8var result = UglifyJS.minify(fs.readFileSync("input.js", "utf8"), {
compress: {
dead_code: true,
global_defs: {
DEBUG: false
}
}
});
식별자를 임의의 비상수 표현식으로 바꾸려면 UglifyJS가 값을 표현식 global_defs
으로 구문 분석하도록 지시하기 위해 키 앞에 를 붙여야 합니다 ."@"
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를 생성하는 초고속 파서입니다. 여기에는 하나의 파일을 구문 분석하고 표준 출력에 JSON의 AST를 덤프하는 작은 CLI 유틸리티가 있습니다. UglifyJS를 사용하여 이를 압축하고 압축하려면 다음을 수행하세요.
1acorn file.js | uglifyjs -p spidermonkey -m -c
이 -p spidermonkey
옵션은 모든 입력 파일이 JavaScript가 아니라 JSON의 SpiderMonkey AST에 설명된 JS 코드임을 UglifyJS에 알려줍니다. 따라서 이 경우에는 자체 파서를 사용하지 않고 해당 AST를 내부 AST로 변환합니다.
Use Acorn for parsing
재미를 위해 Acorn을 사용하여 모든 구문 분석을 수행하는 옵션을 추가했습니다 -p acorn
. 이 옵션을 전달하면 UglifyJS가 require("acorn")
.
Acorn은 정말 빠르지만(예: 일부 650K 코드에서 380ms 대신 250ms) Acorn이 생성하는 SpiderMonkey 트리를 변환하는 데 150ms가 더 걸리므로 전체적으로 UglifyJS의 자체 파서를 사용하는 것보다 조금 더 걸립니다.
Uglify Fast Minify Mode
잘 알려지지 않았지만 공백 제거 및 기호 맹글링은 정교한 코드 변환이 아닌 대부분의 JavaScript에서 축소된 코드 크기 감소의 95%를 차지합니다. 간단히 비활성화하여 compress
Uglify 빌드 속도를 3~4배 높일 수 있습니다. 이렇게 빠르게 mangle
- 전용 모드 Uglify는 다음과 비슷한 축소 속도와 gzip 크기를 갖습니다
butternut
.
d3.js | 크기를 축소하다 | gzip 크기 | 시간 단축(초) |
---|---|---|---|
원래의 | 451,131 | 108,733 | - |
uglify-js@3.0.24 mangle=false, 압축=false | 316,600 | 85,245 | 0.70 |
uglify-js@3.0.24 mangle=true, 압축=false | 220,216 | 72,730 | 1.13 |
버터넛@0.4.6 | 217,568 | 72,738 | 1.41 |
uglify-js@3.0.24 mangle=true, 압축=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
변환은 소스 맵을 사용한 디버깅에 부정적인 영향을 미치는 것으로 알려져 있습니다. 이는 코드가 최적화되고 일부 코드가 더 이상 존재하지 않기 때문에 매핑이 종종 불가능하기 때문에 예상됩니다. 소스의 최고 충실도를 위해 맵 디버깅은 Uglify compress
옵션을 비활성화하고 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()
).