Tolles Community-Modul

UglifyJS 3

UglifyJS ist ein JavaScript-Parser, Minifier, Compressor und Beautifier-Toolkit.

Hinweis:

  • uglify-js@3hat eine vereinfachte API und CLI , die nicht abwärtskompatibel mituglify-js@2 .
  • Dokumentation für UglifyJS- 2.xReleases finden Sie hier .
  • uglify-js unterstützt nur JavaScript (ECMAScript 5).
  • Um ECMAScript 2015 oder höher zu minimieren, transpilieren Sie mit Tools wie Babel .

Installieren

Stellen Sie zunächst sicher, dass Sie die neueste Version von node.js installiert haben (möglicherweise müssen Sie Ihren Computer nach diesem Schritt neu starten).

Von NPM zur Verwendung als Befehlszeilen-App:

1
npm install uglify-js -g

Von NPM zur programmatischen Verwendung:

1
npm install uglify-js

Verwendung der Befehlszeile

1
uglifyjs [input files] [options]

UglifyJS kann mehrere Eingabedateien akzeptieren. Es wird empfohlen, dass Sie zuerst die Eingabedateien und dann die Optionen übergeben. UglifyJS parst Eingabedateien nacheinander und wendet alle Komprimierungsoptionen an. Die Dateien werden im selben globalen Bereich geparst, d von einer Datei zu einer Variablen/Funktion, die in einer anderen Datei deklariert ist, werden richtig abgeglichen.

Wenn keine Eingabedatei angegeben ist, liest UglifyJS von STDIN.

Wenn Sie Ihre Optionen vor den Eingabedateien übergeben möchten, trennen Sie die beiden durch einen doppelten Bindestrich, um zu verhindern, dass Eingabedateien als Optionsargumente verwendet werden:

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.

Geben Sie --output( -o) an, um die Ausgabedatei zu deklarieren, andernfalls geht die Ausgabe an STDOUT.

Optionen für die CLI-Quellzuordnung

UglifyJS kann eine Quellzuordnungsdatei generieren, die für das Debuggen Ihres komprimierten JavaScripts sehr nützlich ist. Um eine Quellzuordnung zu erhalten, übergeben Sie --source-map --output output.js(die Quellzuordnung wird in geschrieben output.js.map).

Zusätzliche Optionen:

  • --source-map "filename='<NAME>'" um den Namen der Quellzuordnung anzugeben.

  • --source-map "root='<URL>'" um die URL zu übergeben, unter der die Originaldateien zu finden sind.

  • --source-map "url='<URL>'"um die URL anzugeben, unter der die Quellzuordnung zu finden ist, andernfalls geht UglifyJS davon aus, dass HTTP X-SourceMapverwendet wird und lässt die //# sourceMappingURL=Direktive weg .

Beispielsweise:

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

Das obige wird komprimiert und verstümmelt file1.jsund file2.js, legt die Ausgabe in foo.min.jsund die Quellzuordnung in ab foo.min.js.map. Die Quellzuordnung bezieht sich auf http://foo.com/src/js/file1.jsund http://foo.com/src/js/file2.js(tatsächlich wird sie http://foo.com/src als Quellzuordnungsstamm und die Originaldateien als js/file1.jsund aufgeführt js/file2.js).

Composed source map

Wenn Sie JS-Code komprimieren, der von einem Compiler wie CoffeeScript ausgegeben wurde, ist die Zuordnung zum JS-Code nicht allzu hilfreich, sondern Sie möchten stattdessen auf den ursprünglichen Code (dh CoffeeScript) zurückzuordnen Angenommen, Sie haben eine Zuordnung von CoffeeScript → kompiliertem JS, UglifyJS kann eine Zuordnung von CoffeeScript → komprimiertem JS generieren, indem jedes Token im kompilierten JS seinem ursprünglichen Speicherort zugeordnet wird.

Um diesen Feature-Pass zu verwenden --source-map "content='/path/to/input/source.map'" oder --source-map "content=inline"wenn die Quellzuordnung in die Quellen integriert ist.

CLI-Komprimierungsoptionen

Sie müssen --compress( -c) übergeben, um die Komprimierung zu aktivieren. Optional können Sie eine durch Kommas getrennte Liste von Komprimierungsoptionen übergeben .

Optionen sind in der Form foo=bar, oder einfach foo(letzteres impliziert eine boolesche Option, die Sie setzen möchten true; es ist praktisch eine Abkürzung für foo=true).

Beispiel:

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

CLI-Mangle-Optionen

Um den Mangler zu aktivieren, müssen Sie --mangle( -m) übergeben. Die folgenden (durch Kommas getrennten) Optionen werden unterstützt:

  • toplevel(Standard false) - Mangle-Namen, die im Gültigkeitsbereich der obersten Ebene deklariert wurden

  • eval(Standard false) - Mangle-Namen, die in Bereichen sichtbar sind, in denen evaloder withverwendet werden.

Wenn die Verstümmelung aktiviert ist, Sie jedoch verhindern möchten, dass bestimmte Namen verstümmelt werden, können Sie diese Namen mit --mangle reserved— übergeben Sie eine durch Kommas getrennte Namensliste.

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

um zu verhindern, dass die require, exportsund $Namen geändert werden.

CLI-Mangling-Eigenschaftsnamen ( --mangle-props)

Hinweis: DIES WIRD WAHRSCHEINLICH IHREN CODE ZERSTÖREN. Das Verkleinern von Eigenschaftsnamen ist ein separater Schritt, der sich vom Variablennamen-Mangling unterscheidet. Übergeben --mangle-propsSie es, um es zu aktivieren. Es werden alle Eigenschaften im Eingabecode mit Ausnahme der integrierten DOM-Eigenschaften und Eigenschaften im Kern-JavaScript verstümmelt Klassen, zum Beispiel:

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 alle Eigenschaften (außer 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());

Mangle alle Eigenschaften außer reservedEigenschaften:

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._());

Mangle alle Eigenschaften, die mit a übereinstimmen 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());

Kombinieren von Mangeleigenschaften-Optionen:

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());

Damit dies von Nutzen ist, vermeiden wir standardmäßig das Verstümmeln von Standard-JS-Namen ( --mangle-props builtinszum Überschreiben).

Es wird eine Standard-Ausschlussdatei bereitgestellt, tools/domprops.jsondie die meisten standardmäßigen JS- und DOM-Eigenschaften abdecken sollte, die in verschiedenen Browsern definiert sind. Passen Sie --mangle-props dompropsan, um diese Funktion zu deaktivieren.

Ein regulärer Ausdruck kann verwendet werden, um zu definieren, welche Eigenschaftsnamen verfälscht werden sollen, zB --mangle-props regex=/^_/werden nur Eigenschaftsnamen verstümmelt , die mit einem Unterstrich beginnen.

Wenn Sie mehrere Dateien mit dieser Option komprimieren, müssen wir, damit sie am Ende zusammenarbeiten, irgendwie sicherstellen, dass eine Eigenschaft in allen auf denselben Namen verstümmelt --name-cache filename.json wird.Dafür wird pass und UglifyJS diese Zuordnungen in a . beibehalten Datei, die dann wiederverwendet werden kann. Sie sollte zunächst leer sein. Beispiel:

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

Jetzt werden part1.jsund part2.jsin Bezug auf die Namen von verstümmelten Eigenschaften miteinander konsistent sein.

Die Verwendung des Namenscache ist nicht erforderlich, wenn Sie alle Ihre Dateien in einem einzigen Aufruf von UglifyJS komprimieren.

Nicht in Anführungszeichen gesetzte Namen verstümmeln ( --mangle-props keep_quoted)

Die Verwendung von Eigenschaftsnamen in Anführungszeichen ( o["foo"]) reserviert den Eigenschaftsnamen ( foo), sodass er nicht im gesamten Skript verstümmelt wird, selbst wenn er in einem Stil ohne Anführungszeichen verwendet wird ( 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

Sie können auch passieren , --mangle-props debugum mangle Eigenschaftsnamen , ohne sie vollständig zu verdunkeln. Zum Beispiel der Eigenschaft o.foo mangle würde o._$foo$_mit dieser Option. Auf diese Weise können Eigenschaft Mangeln einer großen Code - Basis , während immer noch um den Code debuggen zu können und identifizieren , wo Mangeln Dinge brechen.

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

Sie können auch eine benutzerdefinierte Suffix übergeben --mangle-props debug=XYZ. Dies würde dann mangle o.fooan o._$foo$XYZ_. Sie diese jedes Mal , wenn Sie einen Skript kompilieren ändern zu ermitteln , wie eine Eigenschaft verstümmelt wurde. Eine Technik ist eine Zufallszahl auf jeder Kompilierung passieren Mangeln mit verschiedenen Wechseln zu simulieren Eingaben (z. B. beim Aktualisieren des Eingabeskripts mit neuen Eigenschaften) und um Fehler wie das Schreiben von verstümmelten Schlüsseln in den Speicher zu identifizieren.

API-Referenz

Unter der Annahme, dass die Installation über NPM erfolgt, können Sie UglifyJS wie folgt in Ihre Anwendung laden:

1
var UglifyJS = require("uglify-js");

Es gibt eine einzige hohe Funktion minify(code, options),, die alle minification ausführt Phasen in einer konfigurierbaren Weise standardmäßig. minify()Die Optionen ermöglichen compress und . mangleBeispiel:

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}

Sie können minifymehr als eine JavaScript-Datei gleichzeitig verwenden, indem Sie ein Objekt für das erste Argument verwenden, wobei die Schlüssel Dateinamen und die Werte Quellcode sind:

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

Die toplevelMöglichkeit:

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

Die nameCacheMöglichkeit:

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

Sie können den Namenscache folgendermaßen im Dateisystem persistieren:

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

Ein Beispiel für eine Kombination von minify()Optionen:

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

So erzeugen Sie Warnungen:

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}

Ein Fehlerbeispiel:

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}

Hinweis: Im Gegensatz zu `uglify-js@2.x 3.x`, the wirft die API keine Fehler aus. Um einen ähnlichen Effekt zu erzielen, könnte man Folgendes tun:

1 2
var result = UglifyJS.minify(code, options); if (result.error) throw result.error;

Optionen minimieren

  • warnings(Standard false) — Weiter true, um Kompressorwarnungen in zurückzugeben result.warnings. Verwenden Sie den Wert "verbose"für detailliertere Warnungen.

  • parse(Standard {}) — Übergeben Sie ein Objekt, wenn Sie einige zusätzliche Analyseoptionen angeben möchten .

  • compress(Standard {}) — Übergeben false, um die Komprimierung vollständig zu überspringen Übergeben Sie ein Objekt, um benutzerdefinierte Komprimierungsoptionen anzugeben .

  • mangle(Standard true) — übergeben false, um das Verstümmeln von Namen zu überspringen, oder übergeben Sie ein Objekt, um Mangle-Optionen anzugeben (siehe unten).

    • mangle.properties(Standard false) — eine Unterkategorie der mangle-Option Übergeben Sie ein Objekt, um benutzerdefinierte mangle-Eigenschaftsoptionen anzugeben .
  • output(Standard null) — Übergeben Sie ein Objekt, wenn Sie zusätzliche Ausgabeoptionen angeben möchten Die Standardeinstellungen sind für die beste Komprimierung optimiert.

  • sourceMap(default false) -Pass ein Objekt , wenn Sie möchten , geben Sie Optionen Quelle Karte .

  • toplevel(default false)-set to, truewenn Sie die Top-Level-Variablen- und Funktionsnamen- Mangelung aktivieren und nicht verwendete Variablen und Funktionen löschen möchten.

  • nameCache(Standard null) – Übergeben Sie ein leeres Objekt {}oder ein zuvor verwendetes nameCacheObjekt, wenn Sie verstümmelte Variablen- und Eigenschaftsnamen über mehrere Aufrufe von zwischenspeichern möchten minify(). Hinweis: Dies ist eine Lese-/Schreib-Eigenschaft. minify()Liest den Namens-Cache-Status dieses Objekts und aktualisiert ihn. während der Minifizierung, damit sie vom Benutzer wiederverwendet oder extern beibehalten werden kann.

  • ie8(Standard false) – auf trueIE8 setzen.

  • keep_fnames(Standard: false)-pass true, um das Verwerfen oder Verstümmeln von Funktionsnamen zu verhindern Nützlich für Code, der auf Function.prototype.name.

Optionsstruktur minimieren

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

So generieren Sie eine Quellzuordnung:

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

Beachten Sie, dass die Quellzuordnung nicht in einer Datei gespeichert wird, sondern nur in zurückgegeben wird result.map. Der übergebene Wert sourceMap.urlwird nur verwendet, um //# sourceMappingURL=out.js.mapin zu setzen result.code. Der Wert von filenamewird nur verwendet, um das fileAttribut (siehe spec ) in der Quellzuordnungsdatei zu setzen .

Sie können die Option sourceMap.urlso "inline"einstellen, dass die Quellzuordnung an den Code angehängt wird.

Sie können auch die sourceRoot-Eigenschaft angeben, die in die Quellzuordnung aufgenommen werden soll:

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

Wenn Sie kompiliertes JavaScript komprimieren und eine Quellzuordnung dafür haben, können Sie Folgendes verwenden 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`

Wenn Sie stattdessen den X-SourceMapHeader verwenden, können Sie einfach weglassen sourceMap.url.

Parse-Optionen

  • bare_returns(Standard false) - unterstützt returnAnweisungen auf oberster Ebene

  • html5_comments(Standard true)

  • shebang(Standard true) - Unterstützung #!commandals erste Zeile

Komprimierungsoptionen

  • arguments(Standard:) true- Ersetzen Sie nach arguments[index]Möglichkeit durch den Namen des Funktionsparameters.

  • booleans(Standard true:) - verschiedene Optimierungen für booleschen Kontext, zum Beispiel!!a ? b : c → a ? b : c

  • collapse_vars(Standard true:) - Einmalig verwendbare nicht konstante Variablen ausblenden, wenn Nebenwirkungen es zulassen.

  • comparisons(Standard true:) - Wendet bestimmte Optimierungen auf Binärknoten an, z. B. !(a <= b) → a > bVersuche, Binärknoten zu negieren, z a = !b && !c && !d && !e → a=!(b||c||d||e).

  • conditionals(Standard true:) - Wenden Sie Optimierungen für if-s und bedingte Ausdrücke an

  • dead_code(Standard true:) - nicht erreichbaren Code entfernen

  • drop_console(Standard :) false- Übergeben true, um Aufrufe an console.*Funktionen zu verwerfen.Wenn Sie einen bestimmten Funktionsaufruf löschen console.infound/oder Seiteneffekte von Funktionsargumenten beibehalten möchten, nachdem der Funktionsaufruf gelöscht wurde, verwenden Sie pure_funcsstattdessen.

  • drop_debugger(Standard:) true- debugger;Anweisungen entfernen

  • evaluate(Standard true:) - Versuch, konstante Ausdrücke auszuwerten

  • expression(Standard :) false- Übergeben true, um Vervollständigungswerte von Terminalanweisungen ohne zu erhalten return, zB in Bookmarklets.

  • global_defs(Standard :){} - siehe bedingte Kompilierung

  • hoist_funs(Standard false:) - Deklarationen der Hebefunktion

  • hoist_props(Standard true:) - Eigenschaften von konstanten Objekt- und Array-Literalen in reguläre Variablen heben, die einer Reihe von Einschränkungen unterliegen.Beispiel: var o={p:1, q:2}; f(o.p, o.q);wird in konvertiert f(1, 2);Hinweis: Funktioniert am hoist_props besten mit mangleaktiviert, der compressOption passesauf 2oder höher und der compressOption toplevelaktiviert.

  • hoist_vars(Standard false:) - Hebezeug- varDeklarationen (dies ist false standardmäßig so, weil es die Größe der Ausgabe im Allgemeinen zu erhöhen scheint)

  • if_return(Standard true:) - Optimierungen für if/return und if/continue

  • inline(Standard true:) - Inline-Aufrufe zur Funktion mit simple/ return-Anweisung:

    • false - gleich wie 0
    • 0 - Inlining deaktiviert
    • 1 - einfache Inline-Funktionen
    • 2 - Inline-Funktionen mit Argumenten
    • 3 - Inline-Funktionen mit Argumenten und Variablen
    • true - gleich wie 3
  • join_vars(Standard true:) - aufeinanderfolgende varAnweisungen verbinden

  • keep_fargs(Standard true:) - Verhindert, dass der Kompressor nicht verwendete Funktionsargumente verwirft. Sie benötigen dies für Code, der auf basiert Function.length.

  • keep_fnames(Standard :) false- Pass true, um zu verhindern, dass der Kompressor Funktionsnamen verwirft. Nützlich für Code, der auf basiert Function.prototype.name. Siehe auch: die keep_fnames mangle-Option .

  • keep_infinity(Standard :) false- Passen Sie truean, um zu verhindern, Infinitydass in 1/0Chrome komprimiert wird , was zu Leistungsproblemen in Chrome führen kann.

  • loops(Standard true:) - Optimierungen für do, whileund forSchleifen, wenn wir die Bedingung statisch bestimmen können.

  • negate_iife(Standard true:) - "Sofort aufgerufene Funktionsausdrücke" negieren, bei denen der Rückgabewert verworfen wird, um die Klammern zu vermeiden, die der Codegenerator einfügen würde.

  • passes(Standard:) 1- Die maximale Anzahl von Durchläufen für die Komprimierung. In einigen Fällen führt mehr als ein Durchlauf zu weiter komprimiertem Code. Denken Sie daran, dass mehr Durchläufe länger dauern.

  • properties(Standard true:) - Eigenschaftszugriff zum Beispiel mit der Punktnotation umschreibenfoo["bar"] → foo.bar

  • pure_funcs(Standard:) null- Sie können ein Array von Namen übergeben und UglifyJS geht davon aus, dass diese Funktionen keine Nebeneffekte erzeugen. GEFAHR: überprüft nicht, ob der Name im Gültigkeitsbereich neu definiert wurde. Ein Beispielfall hier, zum Beispiel var q = Math.floor(a/b). Wenn die Variable qnicht ist an anderer Stelle verwendet, wird UglifyJS es löschen, behält aber das Math.floor(a/b), ohne zu wissen, was es tut. Sie können übergeben pure_funcs: [ 'Math.floor' ], um es wissen zu lassen, dass diese Funktion keine Nebeneffekte erzeugt, in diesem Fall würde die gesamte Anweisung verworfen Die Implementierung fügt etwas Overhead hinzu (die Komprimierung wird langsamer) Stellen Sie sicher, dass die darunter liegenden Symbole auch darunter pure_funcs sind mangle.reserved, um eine Verstümmelung zu vermeiden.

  • pure_getters(Standard :) "strict"- Wenn Sie truedies übergeben, geht UglifyJS davon aus, dass der Zugriff auf Objekteigenschaften (zB foo.baroder foo["bar"]) keine Nebenwirkungen hat. Geben Sie an, dass nur dann als frei von Nebeneffekten "strict"behandelt werden soll, foo.barwenn fooes sicher nicht geworfen wird, dh nicht nulloder undefined.

  • reduce_funcs(Standard true:) - Ermöglicht das Einbetten von Einmalfunktionen als Funktionsausdrücke, wenn dies zulässig ist, um eine weitere Optimierung reduce_vars zu ermöglichen. Standardmäßig aktiviert. Option hängt davon ab , ob sie aktiviert ist. Einige Codes werden in der Chrome V8-Engine schneller ausgeführt, wenn diese Option deaktiviert ist. Wirkt sich nicht negativ aus Auswirkungen auf andere wichtige Browser.

  • reduce_vars(Standard true:) - Verbessert die Optimierung von Variablen, die mit konstanten Werten zugewiesen und als Konstanten verwendet werden.

  • sequences(default true:) -. beitreten aufeinander folgende einfache Anweisungen des Komma - Operator verwenden , kann auf eine positive ganze Zahl gesetzt werden , um die maximale Anzahl aufeinander folgenden Kommas Sequenzen zu spezifizieren , die erzeugt werden , wenn diese Option eingestellt ist. truedann die Standard - sequencesGrenze 200Set Option. falseoder 0 deaktivieren. Die kleinste sequencesLänge ist 2. Ein sequencesWert von 1 ist äquivalent zu trueund bedeutet als solcher 200. In seltenen Fällen führt die Standard-Sequenzbegrenzung zu sehr langsamen Komprimierungszeiten, in diesem Fall wird ein Wert von 20oder weniger empfohlen.

  • side_effects(Standard :) true- Übergeben false, um potenziell gelöschte Funktionen zu deaktivieren, die als "pure" markiert sind. Ein Funktionsaufruf wird als "pure" markiert, wenn eine Kommentaranmerkung /*@__PURE__*/oder /*#__PURE__*/unmittelbar vor dem Aufruf erfolgt./*@__PURE__*/foo();

  • switches(Standard true:) - Dedupliziere und entferne nicht erreichbare switchBranches

  • toplevel(Standard false:) - Löschen Sie nicht referenzierte Funktionen ( "funcs") und/oder Variablen ( "vars") im Gültigkeitsbereich der obersten Ebene ( falsestandardmäßig werden truesowohl nicht referenzierte Funktionen als auch Variablen gelöscht)

  • top_retain(Standard null:) - verhindert das Entfernen bestimmter Funktionen und Variablen der obersten Ebene unused(kann Array, Komma-getrennt, RegExp oder Funktion sein. Impliziert toplevel)

  • typeofs(Standard:) true- Transformiert typeof foo == "undefined"in foo === void 0. Hinweis: Es wird empfohlen, diesen Wert falseaufgrund bekannter Probleme für IE10 und frühere Versionen auf zu setzen.

  • unsafe(Standard false:) - Wenden Sie "unsichere" Transformationen an (Diskussion unten)

  • unsafe_comps(Standard :) false- Komprimieren Sie Ausdrücke wie die a <= bAnnahme, dass keiner der Operanden (erzwungen) sein kann NaN.

  • unsafe_Function(Standard false:) - komprimieren und verstümmeln, Function(args, code) wenn beide argsund codeString-Literale sind.

  • unsafe_math(Standard false:) - Optimieren Sie numerische Ausdrücke wie 2 * x * 3into 6 * x, was zu ungenauen Gleitkommaergebnissen führen kann.

  • unsafe_proto(Standard false:) - Optimiere Ausdrücke wie Array.prototype.slice.call(a)into[].slice.call(a)

  • unsafe_regexp(Standard false:) - Ermöglichen Sie das Ersetzen von Variablen mit RegExpWerten auf die gleiche Weise, als ob es sich um Konstanten handelt.

  • unsafe_undefined(Standard false:) - ersetzen, void 0wenn es eine Variable mit Namen undefinedim Gültigkeitsbereich gibt (Variablenname wird verstümmelt, normalerweise auf ein einzelnes Zeichen reduziert)

  • unused(Standard true:) - nicht referenzierte Funktionen und Variablen löschen (einfache direkte Variablenzuweisungen zählen nicht als Referenzen, es sei denn, sie sind auf gesetzt "keep_assign")

  • warnings(Standard false:) - Warnungen anzeigen, wenn nicht erreichbarer Code oder nicht verwendete Deklarationen usw.

Mangle-Optionen

  • eval(Standard false) - Übergabe truean Mangle-Namen, die in Bereichen sichtbar sind, in denen evaloder withverwendet werden.

  • keep_fnames(Standard false) - Übergabe truean nicht verstümmelnde Funktionsnamen Nützlich für Code, der auf basiert Function.prototype.nameSiehe auch: die keep_fnames Option Komprimieren .

  • reserved(Standard []) - Pass AN BE Should Array von Bezeichnern, deren Verstümmelung aus dem Beispiel ausgeschlossen ist: ["foo", "bar"].

  • toplevel(Standard false) - Übergabe truean Mangle-Namen, die im Bereich der obersten Ebene deklariert sind.

Beispiele:

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(Standard :) false- trueWird verwendet , um das Verstümmeln von integrierten DOM-Eigenschaften zu ermöglichen. Es wird nicht empfohlen, diese Einstellung zu überschreiben.

  • debug(Standard false:) -— Mangle Namen mit dem ursprünglichen Namen noch vorhanden.Übergeben Sie einen leeren String ""zum Aktivieren oder einen nicht leeren String zum Setzen des Debug-Suffixes.

  • keep_quoted(Standard false:) -— Verstümmle nur Eigenschaftsnamen ohne Anführungszeichen.

  • regex(Standard null:) -— Übergeben Sie ein RegExp-Literal, um nur Eigenschaftsnamen zu verstümmeln, die dem regulären Ausdruck entsprechen.

  • reserved(Standard []:) - Verstümmeln Sie keine Eigenschaftsnamen, die im reservedArray aufgeführt sind.

Ausgabeoptionen

Der Codegenerator versucht standardmäßig den kürzestmöglichen Code auszugeben. Falls Sie eine verschönerte Ausgabe wünschen, übergeben Sie --beautify( -b). Optional können Sie zusätzliche Argumente übergeben, die die Codeausgabe steuern:

  • ascii_only(Standard false) - Escape-Unicode-Zeichen in Strings und Regexps (betrifft Direktiven, bei denen Nicht-ASCII-Zeichen ungültig werden)

  • beautify(default true) - ob die Ausgabe tatsächlich verschönert werden soll.Durch Übergabe -bwird dies auf true gesetzt, aber Sie müssen möglicherweise auch dann übergeben -b, wenn Sie minimierten Code generieren möchten, um zusätzliche Argumente anzugeben, damit Sie ihn -b beautify=falseüberschreiben können.

  • braces(Standard false) - Immer in geschweiften Klammern if, for, do, whileoder with-Anweisungen, deren Körper ist eine einzige IF-Anweisung.

  • comments(default false) - übergeben trueoder "all"um alle Kommentare "some"zu erhalten, um einige Kommentare, einen regulären Ausdruck (zB /^!/) oder eine Funktion zu erhalten.

  • indent_level(Standard 4)

  • indent_start(Standard 0) - allen Zeilen so viele Leerzeichen voranstellen

  • inline_script(Standard true) - Escape HTML-Kommentare und den Schrägstrich in Vorkommen von </script>in Strings string

  • keep_quoted_props(Standard false) - wenn aktiviert , verhindert das Entfernen von Anführungszeichen aus Eigenschaftsnamen in Objektliteralen.

  • max_line_len(Standard false) - maximale Zeilenlänge (für hässlichen Code)

  • preamble(Standard null) - wenn es übergeben wird, muss es ein String sein und wird der Ausgabe buchstäblich vorangestellt. Die Quellzuordnung wird sich an diesen Text anpassen. Kann verwendet werden, um beispielsweise einen Kommentar mit Lizenzinformationen einzufügen.

  • preserve_line(Standard false) - Übergeben true, um Zeilen beizubehalten, aber es funktioniert nur, wenn auf gesetzt beautifyist false.

  • quote_keys(Standard false) - übergeben true, um alle Schlüssel in Literalobjekten zu zitieren

  • quote_style(default 0) - bevorzugter Anführungsstil für Strings (betrifft auch in Anführungszeichen gesetzte Eigenschaftsnamen und Direktiven):

    • 0- bevorzugt doppelte Anführungszeichen, wechselt zu einfachen Anführungszeichen, wenn mehr doppelte Anführungszeichen in der Zeichenfolge selbst vorhanden sind. 0ist am besten für die gzip-Größe geeignet.
    • 1 - Verwenden Sie immer einfache Anführungszeichen
    • 2 - immer doppelte Anführungszeichen verwenden
    • 3 - Verwenden Sie immer die Originalzitate
  • semicolons(default true) - separate Anweisungen mit Semikolon Wenn Sie übergeben false, verwenden wir wann immer möglich einen Zeilenumbruch anstelle eines Semikolons, was zu einer lesbareren Ausgabe von hässlichem Code führt (Größe vor gzip könnte kleiner sein; Größe nach gzip unbedeutend größer).

  • shebang(Standard true) - Shebang #!in Präambel beibehalten (Bash-Skripte)

  • webkit(Standard false) – Umgehungen für WebKit-Fehler aktivieren.PhantomJS-Benutzer sollten diese Option auf setzen true.

  • width(Standard 80) - wird nur wirksam, wenn die Verschönerung eingeschaltet ist, dies gibt eine (orientative) Linienbreite an, die die Verschönerung einzuhalten versucht. Es bezieht sich auf die Breite des Zeilentextes (ohne Einrückung). Es funktioniert derzeit nicht sehr gut , aber es macht den von UglifyJS generierten Code lesbarer.

  • wrap_iife(default false) - übergeben true, um sofort aufgerufene Funktionsausdrücke zu umschließen.Weitere Details finden Sie unter #640 .

Sonstiges

Sie können passieren --commentsbestimmte Kommentare in der Ausgabe zu erhalten. Standardmäßig wird es JSDoc-Stil Kommentare zu halten , die „@preserve“, „@license“ oder „@cc_on“ (bedingte Kompilierung für IE) enthalten. Sie passieren können --comments allalle die halten Kommentare oder einen gültigen JavaScript-Regexp, um nur Kommentare zu behalten, die mit diesem Regexp übereinstimmen. Zum Beispiel --comments /^!/ werden Kommentare wie /*! Copyright Notice */.

Beachten Sie jedoch, dass es Situationen geben kann, in denen Kommentare verloren gehen, zum Beispiel:

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

Obwohl es "@preserve" enthält, geht der Kommentar verloren, da die innere Funktion g(der AST-Knoten, an den der Kommentar angehängt ist) vom Kompressor als nicht referenziert verworfen wird.

Die sichersten Kommentare zum Platzieren von Copyright-Informationen (oder anderen Informationen, die in der Ausgabe beibehalten werden müssen) sind Kommentare, die an Knoten der obersten Ebene angehängt sind.

Die unsafe compressOption

Es ermöglicht einige Transformationen, die in bestimmten Fällen die Codelogik unterbrechen können, sollte aber für den meisten Code in Ordnung sein. Sie können es mit Ihrem eigenen Code ausprobieren, es sollte die minimierte Größe reduzieren. Folgendes passiert, wenn dieses Flag aktiviert ist:

  • new Array(1, 2, 3)oder Array(1, 2, 3)[ 1, 2, 3 ]
  • new Object(){}
  • String(exp)oder exp.toString()"" + exp
  • new Object/RegExp/Function/Error/Array (...) → wir verwerfen die new

Conditional compilation

Sie können den Schalter --define( -d) verwenden, um globale Variablen zu deklarieren, die UglifyJS als Konstanten annimmt (sofern sie nicht im Gültigkeitsbereich definiert sind).Wenn Sie beispielsweise dann übergeben --define DEBUG=false, wird UglifyJS in Verbindung mit der Entfernung von totem Code Folgendes aus der Ausgabe verwerfen:

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

Sie können verschachtelte Konstanten in Form von angeben --define env.DEBUG=false.

UglifyJS warnt etwa der Zustand immer falsch zu sein und über nicht erreichbaren Code fallen, denn jetzt gibt es keine Option ist nur diese spezifische Warnung auszuschalten, können Sie passieren warnings=falsedeaktivieren alle Warnungen.

Eine andere Möglichkeit, dies zu tun, besteht darin, Ihre Globals als Konstanten in einer separaten Datei zu deklarieren und in den Build build/defines.jseinzubinden.Sie können beispielsweise eine Datei mit folgendem haben:

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

und erstellen Sie Ihren Code wie folgt:

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

UglifyJS wird die Konstanten bemerken und, da sie nicht geändert werden können, Verweise auf sie auf den Wert selbst auswerten und nicht erreichbaren Code wie gewohnt löschen. Der Build enthält die constDeklarationen, wenn Sie sie verwenden. Wenn Sie auf <ES6-Umgebungen abzielen, die dies tun not support const, die Verwendung von varwith reduce_vars(standardmäßig aktiviert) sollte ausreichen.

Conditional compilation API

Sie können auch die bedingte Kompilierung über die Programmatic API verwenden, mit dem Unterschied, dass der Property-Name global_defseine Kompressor-Eigenschaft ist und ist:

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 } } });

Um einen Bezeichner durch einen beliebigen nicht konstanten Ausdruck zu ersetzen, muss dem global_defsSchlüssel ein Präfix vorangestellt werden "@", um UglifyJS anzuweisen, den Wert als Ausdruck zu analysieren:

1 2 3 4 5 6 7 8
UglifyJS.minify("alert('hello');", { compress: { global_defs: { "@alert": "console.log" } } }).code; // returns: 'console.log("hello");'

Andernfalls würde es als String-Literal ersetzt:

1 2 3 4 5 6 7 8
UglifyJS.minify("alert('hello');", { compress: { global_defs: { "alert": "console.log" } } }).code; // returns: '"console.log"("hello");'

Verwenden von nativem Uglify AST mit 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

Transversale und Transformation des nativen AST kann durch durchgeführt werden TreeWalkerund TreeTransformer sind.

ESTree / SpiderMonkey AST

UglifyJS hat ein eigenes abstraktes Syntax-Tree-Format, aus praktischen Gründen können wir intern nicht einfach auf SpiderMonkey AST umsteigen, UglifyJS verfügt jedoch jetzt über einen Konverter, der einen SpiderMonkey AST importieren kann.

Zum Beispiel ist Acorn ein superschneller Parser, der einen SpiderMonkey AST erzeugt. Es hat ein kleines CLI-Dienstprogramm, das eine Datei parst und das AST in JSON auf der Standardausgabe ausgibt. Um UglifyJS zu verwenden, um das zu verstümmeln und zu komprimieren:

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

Die -p spidermonkeyOption teilt UglifyJS mit, dass alle Eingabedateien kein JavaScript sind, sondern JS-Code, der in SpiderMonkey AST in JSON beschrieben ist, daher verwenden wir in diesem Fall keinen eigenen Parser, sondern wandeln diesen AST einfach in unseren internen AST um.

Use Acorn for parsing

Mehr zum Spaß habe ich die -p acornOption hinzugefügt, die Acorn verwendet, um das gesamte Parsing durchzuführen.Wenn Sie diese Option übergeben, wird UglifyJS require("acorn").

Acorn ist wirklich schnell (zB 250ms statt 380ms bei einigen 650K-Codes), aber das Konvertieren des SpiderMonkey-Baums, den Acorn erzeugt, dauert weitere 150ms, also insgesamt ist es etwas mehr als nur die Verwendung des eigenen Parsers von UglifyJS.

Uglify Fast Minify Mode

Es ist nicht bekannt, aber Whitespace-Entfernung und Symbol-Mangeling machen 95 % der Größe aus Reduzierung des minimierten Codes für die meisten JavaScript-Codes – nicht aufwendiger Code, der TRANSFORMIERT. Man kann einfach deaktivieren compress, um Uglify-Builds um das 3- bis 4-fache zu beschleunigen Dies ist der mangleSCHNELLE - nur der Uglify-Modus hat vergleichbare Minify-Geschwindigkeiten und gzip-Größen wie butternut:

d3.js Größe verkleinern gzip-Größe Minimierungszeit (Sekunden)
Original 451.131 108.733 -
uglify-js@3.0.24 mangle=falsch, komprimieren=falsch 316.600 85.245 0,70
uglify-js@3.0.24 mangle=true, komprimieren=false 220.216 72.730 1,13
Butternuss @ 0.4.6 217.568 72.738 1,41
uglify-js@3.0.24 mangle=true, komprimieren=true 212.511 71.560 3.36
babili@0.1.4 210.713 72.140 12.64

Um den Fast-Minify-Modus über die CLI zu aktivieren, verwenden Sie:

1
uglifyjs file.js -m

Um den Fast-Minify-Modus mit der API zu aktivieren, verwenden Sie:

1
UglifyJS.minify(code, { compress: false, mangle: true });

Quellzuordnungen und Debugging

Es ist bekannt compress, dass verschiedene Transformationen, die Code vereinfachen, neu anordnen, einbinden und entfernen, sich nachteilig auf das Debuggen mit Quellzuordnungen auswirken. Dies wird erwartet, da der Code optimiert wird und Zuordnungen oft einfach nicht möglich sind, da ein Teil des Codes nicht mehr vorhanden ist. Für höchste Wiedergabetreue in der Quelle Map-Debugging deaktivieren Sie die Uglify- compressOption und verwenden Sie einfach mangle.

Compiler assumptions

Um bessere Optimierungen zu ermöglichen, macht der Compiler verschiedene Annahmen:

  • .toString() und .valueOf() haben keine Nebenwirkungen, und für integrierte Objekte wurden sie nicht überschrieben.
  • undefined, NaNundInfinity wurden nicht extern neu definiert.
  • arguments.callee, arguments.callerundFunction.prototype.caller werden nicht verwendet.
  • Der Code erwartet nicht den Inhalt von Function.prototype.toString()or Error.prototype.stack etwas Bestimmtes zu sein.
  • Das Abrufen und Festlegen von Eigenschaften für ein einfaches Objekt verursacht keine anderen Nebenwirkungen (mit .watch()oderProxy ).
  • KANN das Properties-Objekt hinzugefügt, entfernt und geändert werden (nicht mit Object.defineProperty(), Object.defineProperties(), Object.freeze(), Object.preventExtensions()oder verhindert Object.seal()).