멋진 커뮤니티 모듈

UglifyJS 3

UglifyJS는 JavaScript 파서, 축소 기, 압축기 및 미용 도구 키트입니다.

노트 :

  • uglify-js@3이전 버전과 호환되지 않는 단순화 된 APICLIuglify-js@2 있습니다.
  • UglifyJS 2.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에서 읽습니다.

입력 파일 앞에 옵션을 전달하려면 입력 파일이 옵션 인수로 사용되지 않도록 두 개를 이중 대시로 구분하십시오.

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는 압축 된 자바 스크립트를 디버깅하는 데 매우 유용한 소스 맵 파일을 생성 할 수 있습니다. 소스 맵을 얻으려면 전달하십시오 --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 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.jsfile2.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또는 그저 foo(후자는 설정하려는 부울 옵션을 의미하며 true사실상의 단축키 foo=true임)입니다.

예:

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

CLI mangle 옵션

mangler를 활성화하려면 --mangle( -m) 를 전달해야합니다 . 다음 (쉼표로 구분) 옵션이 지원됩니다.

  • toplevel(기본값 false)-최상위 범위에서 선언 된 이름을 맹 글링합니다.

  • eval(기본값 false)- eval또는 with사용되는 범위에서 볼 수있는 이름을 변경 합니다.

맹 글링이 활성화되었지만 특정 이름이 엉망이되는 것을 방지하려면 --mangle reserved쉼표로 구분 된 이름 목록을 전달하여 해당 이름을 선언 할 수 있습니다 . 예를 들면 다음과 같습니다.

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

require, exports$이름이 변경되는 것을 방지합니다 .

CLI 맹 글링 속성 이름 ( --mangle-props)

참고 : 이렇게하면 코드가 손상 될 수 있습니다. 속성 이름을 변경하는 것은 변수 이름 변경과는 다른 별도의 단계입니다. --mangle-props사용하려면 전달하세요. 기본 자바 스크립트의 기본 DOM 속성 및 속성을 제외하고 입력 코드의 모든 속성을 변경합니다. 예를 들면 다음과 같습니다.

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=/^_/밑줄로 시작하는 속성 이름 만 수정합니다.

이 옵션을 사용하여 여러 파일을 압축 할 때 결국 함께 작동하려면 하나의 속성이 모든 파일에서 같은 이름으로 엉망이되게해야합니다.이를 위해 pass --name-cache filename.json 및 UglifyJS는 이러한 매핑을 a 다시 사용할 수있는 파일입니다. 처음에는 비어 있어야합니다. 예 :

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.jspart2.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
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.foo까지 o._$foo$XYZ_. 당신은 속성이 엉망이 됐는지 확인하는 스크립트를 컴파일이 각각의 시간을 변경할 수 있습니다. 하나 개의 기술은 엉망으로 다른과 변화를 시뮬레이션하기 위해 모든 컴파일에 임의의 숫자를 전달하는 것입니다 입력 (예 : 새 속성으로 입력 스크립트를 업데이트 할 때) 및 저장소에 엉망이 된 키 쓰기와 같은 실수를 식별하는 데 도움이됩니다.

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, 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 속성 옵션 을 지정하기 위해 객체를 전달 합니다.
  • output(기본값 null) — 추가 출력 옵션 을 지정하려는 경우 객체를 전달합니다 . 기본값은 최상의 압축을 위해 최적화되어 있습니다.

  • sourceMap(기본값 false)- 소스 맵 옵션 을 지정하려는 경우 객체를 전달합니다 .

  • toplevel(기본값 false)- true최상위 변수 및 함수 이름 변경을 활성화하고 사용하지 않는 변수 및 함수를 삭제하려면로 설정합니다.

  • nameCache(기본값 null)- 를 여러 번 호출하는 동안 잘린 변수 및 속성 이름을 캐시하려는 경우 빈 객체 {}또는 이전에 사용 된 nameCache객체를 전달합니다 minify(). 참고 : 이것은 읽기 / 쓰기 속성입니다. minify()이 객체의 이름 캐시 상태를 읽고 업데이트합니다. 사용자가 재사용하거나 외부에서 유지할 수 있도록 축소하는 동안

  • ie8(기본값 false)-IE8 true을 지원 하도록 설정 합니다.

  • keep_fnames(기본값 false:) -pass 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.code.의 값 filename만을 설정하는 데 사용되는 file속성 (참조 사양 소스 맵 파일을).

옵션 sourceMap.url을로 설정할 "inline"있으며 소스 맵이 코드에 추가됩니다.

소스 맵에 포함될 sourceRoot 속성을 지정할 수도 있습니다.

1 2 3 4 5 6
var result = UglifyJS.minify({"file1.js": "var a = function() {};"}, { sourceMap: { root: "http://example.com/src", url: "out.js.map" } });

컴파일 된 JavaScript를 압축하고 소스 맵이있는 경우 다음을 사용할 수 있습니다 sourceMap.content.

1 2 3 4 5 6 7
var result = UglifyJS.minify({"compiled.js": "compiled code"}, { sourceMap: { content: "content from compiled.js.map", url: "minified.js.map" } }); // same as before, it returns `code` and `map`

X-SourceMap대신 헤더를 사용하는 경우 sourceMap.url.

구문 분석 옵션

  • bare_returns(기본값 false)-최상위 수준 return지원

  • html5_comments(기본값 true)

  • shebang(기본값 true)- #!command첫 번째 줄로 지원

압축 옵션

  • arguments(기본값 :) true- arguments[index]가능할 때마다 함수 매개 변수 이름으로 대체 합니다.

  • booleans(기본값 true:)-부울 컨텍스트에 대한 다양한 최적화, 예를 들어!!a ? b : c → a ? b : c

  • collapse_vars(기본값 true:)-부작용이 허용되는 일회용 비상 수 변수 축소.

  • comparisons(기본값 true:)-바이너리 노드에 특정 최적화를 적용합니다 ( 예 : !(a <= b) → a > b바이너리 노드를 부정하려는 시도 a = !b && !c && !d && !e → a=!(b||c||d||e)등).

  • conditionals(기본값 true:)-- ifs 및 조건식에 대한 최적화 적용

  • dead_code(기본값 true:)-연결할 수없는 코드 제거

  • drop_console(default :) 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(default :) false- true컴프레서가 함수 이름을 버리지 못하도록 통과 합니다.에 의존하는 코드에 유용합니다 Function.prototype.name. 참조 : keep_fnames mangle 옵션 .

  • 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"- 당신이 전달하는 경우 true이 들어 UglifyJS는 예를 들어 (해당 객체의 속성 액세스를 가정합니다 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__*/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) 모두 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:)-도달 할 수없는 코드 나 사용하지 않는 선언 등을 삭제할 때 경고를 표시합니다.

Mangle 옵션

  • eval(기본값 false)- 또는 사용되는 true범위에 표시되는 이름을 맹글로 전달합니다 .evalwith

  • keep_fnames(기본값 false)- true함수 이름을 변경하지 않도록 전달합니다.에 의존하는 코드에 유용합니다 Function.prototype.name. 참조 : keep_fnames compress 옵션 .

  • 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)-문자열 및 정규 표현식에서 유니 코드 문자를 이스케이프합니다 (비 ASCII 문자가 유효하지 않게되는 지시문에 영향을 줌)

  • beautify(default true)-실제로 출력을 아름답게할지 여부입니다. 전달하면 -b이 값이 true로 설정되지만 -b추가 인수를 지정하기 위해 축소 된 코드를 생성하려는 경우에도 전달해야 할 수 있으므로 -b beautify=false이를 재정의하는 데 사용할 수 있습니다.

  • braces(기본값 false) - 항상은 INSERT 중괄호 if, for, do, while또는 with문, 짝수 그들의 몸은 하나의 IF 문입니다.

  • comments(기본값 false)- 모든 주석을 전달 true하거나 보존하고 일부 주석, 정규식 문자열 (예 :) 또는 함수 를 보존 합니다."all""some"/^!/

  • indent_level(기본값 4)

  • indent_start(기본값 0)-모든 줄 앞에 그만큼의 공백을 붙입니다.

  • inline_script(기본값 true)- </script>문자열 에서 발생하는 HTML 주석과 슬래시를 이스케이프합니다.

  • keep_quoted_props(기본값 false)-설정하면 객체 리터럴의 속성 이름에서 따옴표를 제거하지 않습니다.

  • max_line_len(기본값 false)-최대 줄 길이 (추상화 된 코드의 경우)

  • preamble(기본값 null)-전달되면 문자열이어야하며 출력에 문자 그대로 추가됩니다. 소스 맵이이 텍스트에 맞게 조정됩니다. 예를 들어 라이선스 정보가 포함 된 주석을 삽입하는 데 사용할 수 있습니다.

  • preserve_line(기본값 false)- true줄을 유지하기 위해 전달 하지만 beautify로 설정된 경우에만 작동합니다 false.

  • quote_keys(기본값 false)- true리터럴 객체의 모든 키를 인용하도록 전달

  • quote_style(기본값 0)-문자열에 선호되는 따옴표 스타일 (따옴표로 묶인 속성 이름 및 지시문에도 영향을 미침) :

    • 0-큰 따옴표를 선호하고, 문자열 자체에 큰 따옴표가 더있을 때 작은 따옴표로 전환합니다. 0gzip 크기에 가장 적합합니다.
    • 1 -항상 작은 따옴표 사용
    • 2 -항상 큰 따옴표 사용
    • 3 -항상 원래 따옴표 사용
  • semicolons(default true)-세미콜론 false을 사용하여 문을 분리합니다. 통과 하면 가능할 때마다 세미콜론 대신 개행 문자를 사용하여 추악한 코드를 더 읽기 쉽게 출력합니다 (gzip 이전의 크기는 더 작을 수 있고 gzip 이후의 크기는 상당히 큽니다).

  • shebang(기본값 true)- #!프리앰블에서 shebang 유지 (bash 스크립트)

  • webkit(기본값 false)-WebKit 버그에 대한 해결 방법을 활성화합니다. PhantomJS 사용자는이 옵션을로 설정해야합니다 true.

  • width(기본값 80)-미화가 켜져있을 때만 적용됩니다. 미화가 따라야 할 (방향) 선 너비를 지정합니다. 줄 텍스트의 너비 (들여 쓰기 제외)를 참조합니다. 현재 잘 작동하지 않습니다. 하지만 UglifyJS에서 생성 한 코드를 더 읽기 쉽게 만듭니다.

  • wrap_iife(기본값 false)- true즉시 호출 된 함수 표현식을 래핑하기 위해 전달 합니다. 자세한 내용은 # 640 을 참조하세요.

여러 가지 잡다한

전달 --comments하여 출력에 특정 주석을 유지할 수 있습니다 . 기본적으로 "@preserve", "@license"또는 "@cc_on"(IE의 조건부 컴파일)을 포함하는 JSDoc 스타일 주석 --comments all을 유지합니다 . 전달 하여 모든 주석 을 유지할 수 있습니다. 의견 또는 유효한 자바 스크립트 정규 표현식은이 정규 표현식과 일치하는 의견을 유지합니다. 예를 들어 --comments /^!/ 같은 의견을 유지한다 /*! Copyright Notice */.

그러나 주석이 손실되는 상황이있을 수 있습니다. 예 :

1 2 3 4 5 6 7
function f() { /** @preserve Foo Bar */ function g() { // this function is never called } return something(); }

"@preserve"가 있더라도 내부 함수 g(주석이 첨부 된 AST 노드)가 참조되지 않은 상태로 압축기에 의해 삭제 되기 때문에 주석이 손실 됩니다.

저작권 정보 (또는 출력에 보관해야하는 기타 정보)를 배치 할 가장 안전한 주석은 최상위 노드에 첨부 된 주석입니다.

unsafe compress옵션

특정 인위적인 경우 코드 로직을 손상 시킬 있지만 대부분의 코드에는 문제 가없는 일부 변환이 가능 합니다. 자체 코드에서 시도해 볼 수 있으며 축소 된 크기를 줄여야합니다.이 플래그가 설정되면 다음과 같은 결과가 발생합니다.

  • new Array(1, 2, 3)또는 Array(1, 2, 3)[ 1, 2, 3 ]
  • new Object(){}
  • String(exp)또는 exp.toString()"" + exp
  • new Object/RegExp/Function/Error/Array (...) → 우리는 new

Conditional compilation

--define( -d) 스위치를 사용하여 UglifyJS가 상수로 가정 할 전역 변수를 선언 할 수 있습니다 (범위에 정의되지 않은 경우). 예를 들어 통과하면 --define DEBUG=false데드 코드 제거와 함께 UglifyJS는 출력에서 ​​다음을 삭제합니다.

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

중첩 상수를 형식으로 지정할 수 있습니다 --define env.DEBUG=false.

UglifyJS는 조건이 항상 거짓이고 도달 할 수없는 코드를 삭제하는 것에 대해 경고합니다. 현재로서는이 특정 경고 만 끌 수있는 옵션이 없으므로 모든 경고 warnings=false를 끌 수 있습니다 .

이를 수행하는 또 다른 방법은 전역을 별도의 파일에 상수로 선언하고 빌드에 포함하는 것입니다. 예를 들어 build/defines.js다음과 같은 파일을 가질 수 있습니다 .

1 2 3
var DEBUG = false; var PRODUCTION = true; // etc.

다음과 같이 코드를 작성하십시오.

1
uglifyjs build/defines.js js/foo.js js/bar.js... -c

UglifyJS는 상수를 인식하고 변경할 수 없기 때문에 값 자체에 대한 참조를 평가하고 평소처럼 도달 할 수없는 코드를 삭제합니다. 빌드에는 const선언을 사용하는 경우 포함 됩니다. <ES6 환경을 대상으로하는 경우 하지를 지원 const사용 var으로 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 } } });

식별자를 임의의 상수가 아닌 표현식으로 바꾸려면 UglifyJS가 값을 표현식으로 구문 분석하도록 지시하기 위해 global_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의 횡단 및 변환은 TreeWalkerTreeTransformer 각각을 통해 수행 할 수 있습니다 .

ESTree / SpiderMonkey AST

UglifyJS에는 자체 추상 구문 트리 형식이 있습니다. 실제적인 이유로 내부적으로 SpiderMonkey AST를 사용하도록 쉽게 변경할 수 없습니다. 그러나 UglifyJS에는 이제 SpiderMonkey AST를 가져올 수있는 변환기가 있습니다.

예를 들어 Acorn 은 SpiderMonkey AST를 생성하는 초고속 파서입니다. 하나의 파일을 구문 분석하고 표준 출력에 JSON 형식의 AST를 덤프하는 작은 CLI 유틸리티가 있습니다. UglifyJS를 사용하여이를 조작하고 압축하려면 다음을 수행하십시오.

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

-p spidermonkey옵션은 UglifyJS에 모든 입력 파일이 JavaScript가 아니라 JSON의 SpiderMonkey AST에 설명 된 JS 코드임을 알려줍니다. 따라서이 경우 자체 파서를 사용하지 않고 해당 AST를 내부 AST로 변환합니다.

Use Acorn for parsing

재미 -p acorn를 위해 Acorn을 사용하여 모든 구문 분석을 수행 하는 옵션을 추가했습니다 .이 옵션을 전달하면 UglifyJS가 require("acorn").

Acorn은 정말 빠르지 만 (예 : 일부 650K 코드에서 380ms 대신 250ms), Acorn이 생성하는 SpiderMonkey 트리를 변환하는 데 150ms가 더 걸리므로 전체적으로 UglifyJS의 자체 파서를 사용하는 것보다 약간 더 많은 시간이 걸립니다.

Uglify Fast Minify Mode

IT는 잘 알려진, 그러나 아니에요 공백 제거 및 기호 MOST 자바 스크립트에 대한 축소 된 코드의 크기를 감소에서 95 %에 대한 계정을 엉망으로 -. 정교한하지 코드 TRANSFORMS 하나 CAN 간단히 비활성화 compress추하게은 3 ~ 4 시간에 의해 빌드 속도를 .이 빠른 mangle- 전용 모드 추하게는 비교 작게하다 속도와에 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
butternut@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코드를 단순화, 재 배열, 인라인 및 제거하는 다양한 변환은 소스 맵을 사용한 디버깅에 부정적인 영향을 미치는 것으로 알려져 있습니다. 이는 코드가 최적화되고 일부 코드가 더 이상 존재하지 않기 때문에 매핑이 불가능한 경우가 많기 때문에 예상됩니다. 소스의 충실도를 높이기 위해 지도 디버깅은 Uglify compress옵션을 비활성화하고 mangle.

Compiler assumptions

더 나은 최적화를 위해 컴파일러는 다양한 가정을합니다.

  • .toString().valueOf(), 그리고 내장 객체들은으로 오버라이드 (override)되어 있지 않은에 대한 부작용이 없습니다.
  • undefined, NaNInfinity외부 재정의되지 않았습니다.
  • arguments.callee, arguments.callerFunction.prototype.caller사용되지 않습니다.
  • 코드의 내용을 기대하지 않습니다 Function.prototype.toString()또는 Error.prototype.stack특정 아무것도 할 수 있습니다.
  • 일반 객체에서 속성을 가져오고 설정해도 다른 부작용이 발생하지 않습니다 ( .watch()또는 사용 Proxy).
  • 삭제 및 수정 된 속성 오브젝트를 추가 할 수있다 (예방할없는 Object.defineProperty(), Object.defineProperties(), Object.freeze(), Object.preventExtensions()또는 Object.seal()).