멋진 커뮤니티 모듈

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는 압축된 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 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.jsand 를 참조합니다 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( -m) 를 전달해야 합니다 . 다음(쉼표로 구분) 옵션이 지원됩니다.

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

  • eval(기본값 false) - eval또는 with가 사용되는 범위에서 볼 수 있는 맹글 이름 입니다.

맹글링이 활성화되어 있지만 특정 이름이 맹글링되는 것을 방지하려면 --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=/^_/밑줄로 시작하는 속성 이름만 맹글링합니다 .

이 옵션을 사용하여 여러 파일을 압축할 때 결국 함께 작동하려면 하나의 속성이 모든 파일에서 동일한 이름으로 변경되도록 해야 합니다. 이를 위해 --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.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()옵션 compress가 활성화됩니다 mangle. 예:

1 2 3 4
var code = "function add(first, second) { return first + second; }"; var result = UglifyJS.minify(code); console.log(result.error); // runtime error, or `undefined` if no error console.log(result.code); // minified output: function add(n,d){return n+d}

minify키가 파일 이름이고 값이 소스 코드인 첫 번째 인수에 대해 개체를 사용하여 한 번에 둘 이상의 JavaScript 파일을 만들 수 있습니다 .

1 2 3 4 5 6 7
var code = { "file1.js": "function add(first, second) { return first + second; }", "file2.js": "console.log(add(1 + 2, 3 + 4));" }; var result = UglifyJS.minify(code); console.log(result.code); // function add(d,n){return d+n}console.log(add(3,7));

toplevel옵션 :

1 2 3 4 5 6 7 8
var code = { "file1.js": "function add(first, second) { return first + second; }", "file2.js": "console.log(add(1 + 2, 3 + 4));" }; var options = { toplevel: true }; var result = UglifyJS.minify(code, options); console.log(result.code); // console.log(3+7);

nameCache옵션 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
var options = { mangle: { toplevel: true, }, nameCache: {} }; var result1 = UglifyJS.minify({ "file1.js": "function add(first, second) { return first + second; }" }, options); var result2 = UglifyJS.minify({ "file2.js": "console.log(add(1 + 2, 3 + 4));" }, options); console.log(result1.code); // function n(n,r){return n+r} console.log(result2.code); // console.log(n(3,7));

다음과 같은 방법으로 파일 시스템에 이름 캐시를 유지할 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
var cacheFileName = "/tmp/cache.json"; var options = { mangle: { properties: true, }, nameCache: JSON.parse(fs.readFileSync(cacheFileName, "utf8")) }; fs.writeFileSync("part1.js", UglifyJS.minify({ "file1.js": fs.readFileSync("file1.js", "utf8"), "file2.js": fs.readFileSync("file2.js", "utf8") }, options).code, "utf8"); fs.writeFileSync("part2.js", UglifyJS.minify({ "file3.js": fs.readFileSync("file3.js", "utf8"), "file4.js": fs.readFileSync("file4.js", "utf8") }, options).code, "utf8"); fs.writeFileSync(cacheFileName, JSON.stringify(options.nameCache), "utf8");

minify()옵션 조합의 예 :

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
var code = { "file1.js": "function add(first, second) { return first + second; }", "file2.js": "console.log(add(1 + 2, 3 + 4));" }; var options = { toplevel: true, compress: { global_defs: { "@console.log": "alert" }, passes: 2 }, output: { beautify: false, preamble: "/* uglified */" } }; var result = UglifyJS.minify(code, options); console.log(result.code); // /* uglified */ // alert(10);"

경고를 생성하려면:

1 2 3 4 5 6
var code = "function f(){ var u; return 2 + 3; }"; var options = { warnings: true }; var result = UglifyJS.minify(code, options); console.log(result.error); // runtime error, `undefined` in this case console.log(result.warnings); // [ 'Dropping unused variable u [0:1,18]' ] console.log(result.code); // function f(){return 5}

오류 예:

1 2 3
var result = UglifyJS.minify({"foo.js" : "if (0) else console.log(1);"}); console.log(JSON.stringify(result.error)); // {"message":"Unexpected token: keyword (else)","filename":"foo.js","line":1,"col":7,"pos":7}

참고: `uglify-js@2.x, the 3.x` 와 달리 API는 오류를 발생시키지 않습니다. 비슷한 효과를 얻으려면 다음을 수행할 수 있습니다.

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

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

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

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

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

  • 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:) - if-s 및 조건식에 대한 최적화 적용

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

  • drop_console(기본값 :) false- 함수에 대한 true호출을 버리기 위해 전달 console.*합니다. 함수 호출 console.info을 삭제한 후 함수 인수에서 부작용을 유지하거나 같은 특정 함수 호출 을 삭제하려면 pure_funcs대신 사용하십시오.

  • drop_debugger(기본값:) true- debugger;제거

  • evaluate(기본값 true:) - 상수 표현식 평가 시도

  • expression(기본값) false- 예를 들어 북마크에서 true없이 터미널 문에서 완성 값을 유지하기 위해 전달합니다 return.

  • global_defs(기본값 :){} - 조건부 컴파일 참조

  • hoist_funs(기본값 false:) - 호이스트 함수 선언

  • hoist_props(기본 true: - 일련의 제약에 일반 변수를 대상으로 상수 객체와 배열 리터럴에서 호이스트 속성은 예를 들면 다음과 같습니다. var o={p:1, q:2}; f(o.p, o.q);로 변환된다 f(1, 2);. : 주 hoist_props 에서 가장 잘 작동 mangle활성화의 compress옵션 passes으로 설정 2이상, 그리고 compress옵션이 toplevel활성화.

  • hoist_vars(기본 false: - 호이스트 var선언 (이것이 false 는 일반적으로 출력의 크기를 증가하는 것 때문에 기본적으로)

  • if_return(기본값 true:) - if/return 및 if/continue 최적화

  • inline(기본값 true:) - simple/ return으로 함수에 대한 인라인 호출 :

    • false - 와 동일 0
    • 0 - 비활성화된 인라인
    • 1 - 인라인 단순 함수
    • 2 - 인수가 있는 인라인 함수
    • 3 - 인수와 변수가 있는 인라인 함수
    • true - 와 동일 3
  • join_vars(기본값 true:) - 연속된 var문을 조인

  • keep_fargs(기본값 true:) - 압축기가 사용하지 않는 함수 인수를 버리는 것을 방지합니다. 에 의존하는 코드에 필요합니다 Function.length.

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

  • keep_infinity(기본값) false- Chrome에서 성능 문제를 일으킬 수 있는 압축 true을 방지하기 위해 전달 합니다.Infinity1/0

  • loops(기본값 true:) - 조건을 정적으로 결정할 수 있는 경우 do, whilefor루프에 대한 최적화 .

  • negate_iife(기본값) true- 코드 생성기가 삽입할 괄호를 피하기 위해 반환 값이 버려지는 "즉시 호출된 함수 표현식"을 부정합니다.

  • passes(기본값:) 1- 압축을 실행할 최대 횟수입니다. 어떤 경우에는 하나 이상의 패스가 더 압축된 코드로 이어집니다. 패스가 많을수록 더 많은 시간이 소요됩니다.

  • properties(기본값 true:) - 예를 들어 점 표기법을 사용하여 속성 액세스 재작성foo["bar"] → foo.bar

  • pure_funcs(기본값:) null- 이름 배열을 전달할 수 있으며 UglifyJS는 해당 함수가 부작용을 생성하지 않는다고 가정합니다. DANGER: 범위 내에서 이름이 재정의되었는지 여부를 확인하지 않습니다. 예를 들어 여기의 예 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.의 sequences1 에 상응하는 것으로 예외 적용된되는 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 또는 함수일 수 있음. 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) 모두 argscode문자열 리터럴입니다.

  • unsafe_math(기본값) false- 2 * x * 3into 와 같은 수치 표현식을 최적화 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범위에서 볼 수 있는 맹글 이름으로 전달 합니다.evalwith

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

  • reserved(기본값 []) - 맹글링이 예제에서 제외된 식별자의 배열을 AN BE 해야 합니다. ["foo", "bar"]. .

  • toplevel(기본값 false) - true최상위 범위에서 선언된 mangle 이름으로 전달합니다.

예:

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:) - 원래 이름을 가진 Mangle 이름이 여전히 존재합니다. ""활성화 하려면 빈 문자열 을 전달하고 디버그 접미사를 설정하려면 비어 있지 않은 문자열을 전달합니다.

  • keep_quoted(기본값 false:) - 인용되지 않은 속성 이름만 맹글링합니다.

  • regex(기본값 null:) - 정규식과 일치하는 속성 이름을 맹글링하기 위해 RegExp 리터럴을 전달합니다.

  • reserved(기본값 []:) - reserved배열에 나열된 속성 이름을 변경하지 마십시오 .

출력 옵션

코드 생성기는 기본적으로 가능한 가장 짧은 코드를 출력하려고 시도합니다. 아름다운 출력을 원할 경우 --beautify( -b)를 전달하십시오 . 선택적으로 코드 출력을 제어하는 ​​추가 인수를 전달할 수 있습니다.

  • ascii_only(기본값 false) - 문자열 및 정규 표현식에서 유니코드 문자를 이스케이프합니다(비 ASCII 문자가 유효하지 않은 지시문에 영향을 미침).

  • beautify(기본값 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) - 최대 줄 길이(uglified 코드의 경우)

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

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

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

  • quote_style(기본값 0) - 문자열에 대한 기본 인용 스타일(따옴표로 묶인 속성 이름 및 지시문에도 영향을 줌):

    • 0- 큰 따옴표를 선호하고 문자열 자체에 큰 따옴표가 더 많은 경우 작은 따옴표로 전환합니다. 0gzip 크기에 가장 적합합니다.
    • 1 - 항상 작은따옴표 사용
    • 2 - 항상 큰따옴표를 사용
    • 3 - 항상 원래 따옴표를 사용하십시오.
  • semicolons(기본값 true) - 세미콜론으로 문을 분리합니다. falsethen 을 전달 하면 가능하면 세미콜론 대신 줄 바꿈을 사용하여 못생긴 코드의 더 읽기 쉬운 출력으로 이어집니다(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을 유지하기 위해 전달할 수 있습니다. 주석 또는 이 정규 표현식과 일치하는 주석만 유지하려면 유효한 JavaScript 정규 표현식입니다. 예를 들어 --comments /^!/ 와 같은 주석은 유지됩니다 /*! Copyright Notice */.

그러나 주석이 손실되는 상황이 있을 수 있습니다. 예를 들면 다음과 같습니다.

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

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

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

unsafe compress옵션

그것은 몇 가지 변환 할 수 있습니다 어떤 인위적인 경우 코드 논리를 깰를하지만, 대부분의 코드를 잘해야합니다 당신은 자신의 코드에 그것을 시도 할 수 있습니다, 그것은 축소 된 크기를 줄여야합니다 다음은이 플래그가 켜져 때 발생합니다.. :

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

Conditional compilation

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

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

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

UglifyJS은 조건이 항상 false 것에 대해와 연결할 수없는 코드를 삭제에 대해 경고합니다, 지금이 특정한 경고를 해제 할 수있는 방법이 없습니다를 들어, 당신이 전달할 수 있습니다 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합니다. 사용하는 경우 빌드에 선언 이 포함 됩니다. 하지를 지원 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를 생성하는 초고속 파서입니다. 하나의 파일을 구문 분석하고 AST를 표준 출력에 JSON으로 덤프하는 작은 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

잘 알려져 있지는 않지만 공백 제거 및 기호 맹글링이 크기의 95%를 차지합니다 대부분의 JavaScript에 대한 축소된 코드 감소 -. 코드를 정교화하지 않음 TRANSFORMS One은 간단히 비활성화 compress하여 Uglify 빌드 속도를 3~4배 높일 수 있습니다. 이것은 가장 mangle빠릅니다 . - 전용 모드 Uglify는 다음과 비슷한 축소 속도와 gzip 크기를 가지고 있습니다 butternut.

d3.js 크기 축소 gzip 크기 시간 단축(초)
원래의 451,131 108,733 -
uglify-js@3.0.24 맹글=거짓, 압축=거짓 316,600 85,245 0.70
uglify-js@3.0.24 맹글=참, 압축=거짓 220,216 72,730 1.13
버터넛@0.4.6 217,568 72,738 1.41
uglify-js@3.0.24 맹글=참, 압축=참 212,511 71,560 3.36
바빌리@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, NaN그리고 Infinity외부적으로 재정의되지 않았습니다.
  • arguments.callee, arguments.callerFunction.prototype.caller사용되지 않습니다.
  • 코드는 내용 Function.prototype.toString()이나 Error.prototype.stack특정 내용을 기대하지 않습니다 .
  • 일반 개체의 속성을 가져오고 설정해도 다른 부작용이 발생하지 않습니다( .watch()또는 사용 Proxy).
  • 삭제 및 수정 된 속성 오브젝트를 추가 할 수있다 (예방할없는 Object.defineProperty(), Object.defineProperties(), Object.freeze(), Object.preventExtensions()또는 Object.seal()).