멋진 커뮤니티 모듈

UglifyJS 3

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

노트 :

  • uglify-js@3 에는 uglify-js@2 와 하위 호환되지 않는 단순화 된 APICLI 있습니다.
  • UglifyJS 2.x 릴리스에 대한 문서는 여기 에서 찾을 수 있습니다 .
  • uglify-js 는 JavaScript (ECMAScript 5) 만 지원합니다.
  • To minify ECMAScript 2015 or above 을 축소 To minify ECMAScript 2015 or above 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 전달 --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 압축 및 file1.js 하고 file2.js 에 출력을, foo.min.js 에 소스 맵을 foo.min.js.map 합니다. 소스 매핑은 http://foo.com/src/js/file1.js 을 참조합니다. http://foo.com/src/js/file1.jshttp://foo.com/src/js/file2.js (사실 http://foo.com/src 를 소스 맵 루트로 나열하고 원본 파일을 js/file1.jsjs/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 되는 것을 방지하려면 --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 ).

다양한 브라우저에 정의 된 대부분의 표준 JS 및 DOM 속성을 포함해야하는 tools/domprops.json 에 기본 제외 파일이 제공됩니다.이 기능을 사용하지 않으 --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.foo 속성은이 옵션을 사용하여 o._$foo$_ 로 변경됩니다. 이렇게하면 대규모 코드베이스의 속성 변경이 가능합니다. 코드를 디버그하고 맹 글링이 문제를 일으키는 위치를 식별 할 수 있습니다.

1
$ uglifyjs stuff.js --mangle-props debug -c -m
1
var o={_$foo$_:1,_$bar$_:3};o._$foo$_+=o._$bar$_,console.log(o._$foo$_);

--mangle-props debug=XYZ 사용하여 사용자 정의 접미사를 전달할 수도 있습니다. 그러면 o.fooo._$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}

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

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 (default {} ) — 몇 가지 추가 구문 분석 옵션 을 지정하려는 경우 객체를 전달합니다.

  • compress (default {} ) — 전체 압축을 건너 뛰려면 false 를 전달 false 사용자 지정 압축 옵션 을 지정하려면 객체를 전달합니다.

  • mangle (기본값 true ) — mangling 이름을 건너 뛰려면 false 를 전달하거나 mangle 옵션 을 지정하기 위해 객체를 전달합니다 (아래 참조).

    • mangle.properties (기본값 false ) — mangle 옵션의 하위 범주입니다. 사용자 정의 mangle 속성 옵션 을 지정하려면 객체를 전달하십시오.
  • output (default null ) — 추가 출력 옵션 을 지정하려는 경우 객체를 전달합니다. 기본값은 최상의 압축을 위해 최적화되어 있습니다.

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

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

  • nameCache (디폴트 null ) nameCache 빈 개체 {} 또는 이전에 사용 nameCache 당신의 여러 호출에 걸쳐 캐시 망가 변수 및 특성 이름을하고자하는 경우 오브젝트를 minify() 참고 :.이 읽기 / 쓰기 속성입니다. minify() 것이다 이 개체의 이름 캐시 상태를 읽고 축소하는 동안 업데이트하여 사용자가 재사용하거나 외부에서 유지할 수 있도록합니다.

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

  • keep_fnames (기본값 : false )-함수 이름의 삭제 또는 변경을 방지하려면 true 를 전달합니다. Function.prototype.name 의존하는 코드에 유용합니다.

옵션 구조 축소

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
{ parse: { // parse options }, compress: { // compress options }, mangle: { // mangle options properties: { // mangle property options } }, output: { // output options }, sourceMap: { // source map options }, nameCache: null, // or specify a name cache object toplevel: false, ie8: false, warnings: false, }

Source map options

소스 맵을 생성하려면 :

1 2 3 4 5 6 7 8
var result = UglifyJS.minify({"file1.js": "var a = function() {};"}, { sourceMap: { filename: "out.js", url: "out.js.map" } }); console.log(result.code); // minified output console.log(result.map); // source map

소스 맵 파일에 저장되지 않는다는 것을 참고, 그냥 반환 것 result.map .를 위해 전달 된 값 sourceMap.url 단지 설정하는 데 사용됩니다 //# sourceMappingURL=out.js.mapresult.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" } });

컴파일 된 자바 스크립트를 압축하고 소스 맵이있는 경우 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 (default : true )-부울 컨텍스트에 대한 다양한 최적화, 예 !!a ? b : c → a ? b : c

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

  • comparisons (기본값 : true )-이진 노드에 특정 최적화를 적용합니다 !(a <= b) → a > b 예 : !(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; 제거 debugger;

  • evaluate (기본값 : true )-상수 표현식 평가를 시도합니다.

  • expression (default : false )-예를 들어 북마크릿에서 return 없이 터미널 문에서 완성 값을 보존하려면 true 를 전달합니다.

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

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

  • hoist_props (default : true )-상수 객체 및 배열 리터럴의 속성을 제약 조건 집합에 따라 일반 변수로 끌어 hoist_props . 예 : var o={p:1, q:2}; f(op, oq); is f(1, 2); 로 변환 됨 참고 : hoist_propsmangle 활성화하고, compress 옵션 passes2 이상으로 설정하고, compress 옵션 toplevel 활성화 할 때 가장 잘 작동합니다.

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

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

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

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

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

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

  • keep_infinity (기본값 : false ) - 패스 true 방지하기 위해 Infinity 로 압축되는 1/0 크롬에 성능 문제가 발생할 수있다.

  • loops (default : true )-조건을 정적으로 결정할 수있을 때 do , whilefor 루프 while 최적화합니다.

  • 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 아래의 pure_funcs 있는지 확인합니다. mangle.reserved 아래. 맹 글링을 피하기 위해 mangle.reserved 되었습니다.

  • pure_getters (기본값 : "strict" )- true 를 전달하면 UglifyJS는 객체 속성 액세스 (예 : foo.bar 또는 foo["bar"] )에 부작용이 없다고 가정합니다. "strict" 를 지정하여 foo 가 던지지 않는 것이 확실한 경우에만 foo.bar 를 부작용이없는 것으로 취급하십시오. 즉, null 또는 undefined 아닙니다.

  • reduce_funcs (기본값 : true )-허용되는 경우 추가 최적화를 허용하는 경우 일회용 함수를 함수 표현식으로 인라인 할 수 있습니다. 기본적으로 활성화됩니다. 옵션은 reduce_vars 활성화에 따라 다릅니다. 일부 코드는이 옵션을 비활성화하면 Chrome V8 엔진에서 더 빠르게 실행됩니다. . 다른 주요 브라우저에 부정적인 영향을주지 않습니다.

  • reduce_vars (기본값 : true )-상수 값으로 할당되고 사용되는 변수에 대한 최적화를 개선합니다.

  • sequences (기본값 : true )-쉼표 연산자를 사용하여 연속 된 단순 문을 결합합니다. 생성 될 연속 쉼표 시퀀스의 최대 수를 지정하기 위해 양의 정수로 설정할 수 있습니다.이 옵션이 true 로 설정되면 기본 sequences 제한됩니다. 200 입니다. 옵션을 false 또는 0 으로 설정하여 비활성화합니다. 가장 작은 sequences 길이는 2 . sequences1true 와 동일하게 지정되어 200 의미합니다. 드물게 기본 시퀀스 제한으로 인해 압축 시간이 매우 느려집니다. 이 경우 20 이하의 값이 권장됩니다.

  • side_effects (기본값 : true )- "pure"로 표시된 잠재적 삭제 기능을 비활성화하려면 false 를 전달합니다. 주석 주석 /*@__PURE__*/ 또는 /*#__PURE__*/ 바로 앞에 오는 경우 함수 호출은 "pure"로 표시됩니다. 예를 들어 : /*@__PURE__*/foo();

  • switches (기본값 : true )-중복 제거 및 연결할 수없는 switch 분기 제거

  • toplevel (default : false )- toplevel 참조되지 않은 함수 ( "funcs" ) 및 / 또는 변수 ( "vars" )를 삭제합니다 (기본적으로 false , 참조되지 않은 함수와 변수를 모두 삭제하려면 true )

  • top_retain (기본값 : null )-특정 최상위 함수 및 변수가 unused 제거를 방지합니다 (배열, 쉼표로 구분, RegExp 또는 함수일 수 있습니다. toplevel 의미 함)

  • typeofs (기본값 : true ) typeofs typeof foo == "undefined"foo === void 0 으로 변환 foo === void 0 참고 : 알려진 문제로 인해 IE10 및 이전 버전의 경우이 값을 false 로 설정하는 것이 좋습니다.

  • unsafe false (기본값 : false )- "안전하지 않은"변환 적용 (아래 설명)

  • unsafe_comps (기본값 : false )-피연산자가 NaN 될 수 없다고 가정 a <= b 와 같은 표현식을 압축합니다.

  • unsafe_Function (기본값 : false )- argscode 가 모두 문자열 리터럴 일 때 Function(args, code) 압축 및 조작.

  • unsafe_math (기본값 : false ) 2 * x * 3 과 같은 숫자 표현식을 6 * x 로 최적화하여 부정확 한 부동 소수점 결과를 제공 할 수 있습니다.

  • unsafe_proto (기본값 : false ) - 같은 최적화 식 Array.prototype.slice.call(a)[].slice.call(a)

  • unsafe_regexp (기본값 : false )-상수 인 경우와 동일한 방식으로 RegExp 값으로 변수를 대체 할 수 있습니다.

  • unsafe_undefined (기본값 : false )-범위에 undefined 라는 이름의 변수가있는 경우 void 0 대체합니다 (변수 이름은 엉망이되며 일반적으로 단일 문자로 축소됨).

  • unused (default : true )-참조되지 않은 함수 및 변수를 삭제합니다 (단순 직접 변수 할당은 "keep_assign" 설정하지 않는 한 참조로 계산되지 않음)

  • warnings (default : false )-연결할 수없는 코드 나 사용하지 않는 선언 등을 삭제할 때 경고를 표시합니다.

Mangle 옵션

  • eval (기본값 false ) eval 또는 with 가 사용되는 범위에 표시되는 이름을 변경하려면 true 를 전달합니다.

  • 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 )-내장 DOM 속성의 변경을 허용하려면 true 를 사용 true .이 설정을 재정의하지 않는 것이 좋습니다.

  • debug (기본값 : false ) -— 원래 이름을 가진 이름이 여전히 존재합니다. 활성화하려면 빈 문자열 "" 을 전달하고 디버그 접미사를 설정하려면 비어 있지 않은 문자열을 전달하십시오.

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

  • regex (기본값 : null ) -— 정규식과 일치하는 속성 이름 만 변경하도록 RegExp 리터럴을 전달합니다.

  • reserved (기본값 : [] )- reserved 배열에 나열된 속성 이름을 변경하지 않습니다.

출력 옵션

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

  • ascii_only (기본값 false )-문자열 및 ascii_only 에서 유니 코드 문자를 이스케이프합니다 (비 ASCII 문자가 유효하지 않게되는 지시문에 영향을 줌)

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

  • braces (기본값 false )-본문이 단일 문인 경우에도 항상 if , for , do , while 또는 with 문에 중괄호를 삽입합니다.

  • comments (기본값 false )-모든 주석을 보존하려면 true 또는 "all" 을 전달 true , 일부 주석을 보존하려면 "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 를 전달하지만 beautifyfalse 로 설정된 경우에만 작동합니다.

  • quote_keys (기본값 false )-리터럴 객체의 모든 키를 인용하려면 true 를 전달합니다.

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

    • 0 큰 따옴표를 선호하고, 문자열 자체에 큰 따옴표가 더있을 때 작은 따옴표로 전환합니다. gzip 크기에는 0 이 가장 좋습니다.
    • 1 항상 작은 따옴표 사용
    • 2 항상 큰 따옴표 사용
    • 3 항상 원래 따옴표 사용
  • semicolons (기본값 true )-세미콜론으로 문을 분리합니다. false 를 전달하면 가능할 때마다 세미콜론 대신 줄 바꿈을 사용하여 더 읽기 쉬운 코드 출력을 유도합니다 (gzip 이전의 크기는 더 작을 수 있음; gzip 이후의 크기는 상당히 커질 수 있음). ).

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

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

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

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

여러 가지 잡다한

귀하가 CAN 패스 --comments 댓글에 "@license"또는 "@cc_on"을 "@preserve를"주석이 포함 JSDoc을 유지할 IT 스타일에 기본적으로 출력을 일부 유지 (들에 대한 조건부 컴파일) 패스 할 수 있습니다로.. --comments all 은 모든 주석을 유지하거나 유효한 JavaScript regexp는이 정규식과 일치하는 주석 만 유지합니다. 예를 들어 --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 지원하지 않으므로 reduce_vars (기본적으로 활성화 됨)와 함께 var 를 사용하면 충분합니다.

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");'

minify minify() 와 함께 네이티브 Uglify AST 사용

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

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

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

Uglify Fast Minify Mode

잘 알려져 있지는 않지만 공백 제거 및 기호 맹 글링은 대부분의 JavaScript- 정교하지 않은 코드 변환에서 축소 된 코드 크기 감소의 95 %를 차지합니다. 간단히 compress 을 비활성화하여 Uglify 빌드 속도를 3 ~ 4 배 높일 수 있습니다. mangle 전용 모드 Uglify는 minify 속도와 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() 에는 부작용이 없으며 내장 객체의 경우 재정의되지 않았습니다.
  • undefined , NaNInfinity 는 외부 적으로 재정의되지 않았습니다.
  • arguments.callee , arguments.callerFunction.prototype.caller 는 사용되지 않습니다.
  • 이 코드는 Function.prototype.toString() 또는 Error.prototype.stack 의 내용이 특별한 것으로 예상하지 않습니다.
  • 일반 객체에서 속성을 가져오고 설정해도 다른 부작용이 발생하지 않습니다 ( .watch() 또는 Proxy ).
  • Object properties can be added , 제거 및 수정할 Object properties can be added ( Object.defineProperty() , Object.defineProperties() , Object.freeze() , Object.preventExtensions() 또는 Object.seal() 방지되지 않음).