Tolles Community-Modul

UglifyJS 3

UglifyJS ist ein JavaScript-Parser-, Minifier-, Kompressor- und Verschönerungs-Toolkit.

Notiz:

  • uglify-js@3verfügt über eine vereinfachte API und CLI , die nicht abwärtskompatibel mit istuglify-js@2 .
  • Dokumentation für UglifyJS- 2.xReleases finden Sie hier .
  • uglify-jsunterstü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 (nach diesem Schritt müssen Sie möglicherweise Ihren Computer neu starten).

Von NPM zur Verwendung als Befehlszeilen-App:

1
npm install uglify-js -g

Von NPM zur programmatischen Nutzung:

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 analysiert die Eingabedateien nacheinander und wendet alle Komprimierungsoptionen an. Die Dateien werden im selben globalen Bereich analysiert, d. h. als Referenz von einer Datei zu einer in einer anderen Datei deklarierten Variablen/Funktion wird ordnungsgemäß abgeglichen.

Wenn keine Eingabedatei angegeben ist, liest UglifyJS aus 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.

CLI-Quellzuordnungsoptionen

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

Zusatzoptionen:

  • --source-map "filename='<NAME>'"um den Namen der Quellkarte 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 Quellkarte zu finden ist. Andernfalls geht UglifyJS davon aus, dass HTTP X-SourceMapverwendet wird, und lässt die //# sourceMappingURL=Direktive weg.

Zum Beispiel:

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 komprimiert und entstellt file1.jsund file2.jslegt die Ausgabe in foo.min.jsund die Quellzuordnung in ab foo.min.js.map. Die Quellzuordnung verweist auf http://foo.com/src/js/file1.jsund http://foo.com/src/js/file2.js(tatsächlich wird sie http://foo.com/src als Quellzuordnungsstammverzeichnis 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 besonders hilfreich. Stattdessen möchten Sie eine Zuordnung zurück zum Originalcode (z. B. CoffeeScript) vornehmen. UglifyJS verfügt über eine Option, um eine Eingabequellenzuordnung zu übernehmen. Vorausgesetzt, Sie haben eine Zuordnung von CoffeeScript → kompiliertem JS, kann UglifyJS eine Zuordnung von CoffeeScript → komprimiertem JS generieren, indem jedes Token im kompilierten JS seinem ursprünglichen Speicherort zugeordnet wird.

Um dieses Feature zu verwenden, übergeben Sie es --source-map "content='/path/to/input/source.map'" oder --source-map "content=inline"wenn die Quellkarte inline mit den Quellen eingebunden ist.

CLI-Komprimierungsoptionen

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

Optionen haben die Form foo=bar, oder einfach foo(Letzteres impliziert eine boolesche Option, die Sie festlegen 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

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

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

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

Wenn das Verstümmeln aktiviert ist, Sie aber verhindern möchten, dass bestimmte Namen verstümmelt werden, können Sie diese Namen mit deklarieren --mangle reserved– übergeben Sie eine durch Kommas getrennte Liste von Namen. Beispiel:

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

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

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

Hinweis: Dies führt wahrscheinlich dazu, dass Ihr Code kaputt geht. Das Verstümmeln von Eigenschaftsnamen ist ein separater Schritt, der sich vom Verstümmeln von Variablennamen unterscheidet. Übergeben Sie es, --mangle-propsum es zu aktivieren. Es werden alle Eigenschaften im Eingabecode entstellt, mit Ausnahme der integrierten DOM-Eigenschaften und Eigenschaften im Kern-JavaScript 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());

Alle Eigenschaften verstümmeln (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());

Alle Eigenschaften außer den reservedEigenschaften verstümmeln:

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

Verstümmeln Sie alle Eigenschaften, die mit einem ü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 Mangle-Eigenschaftsoptionen:

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 es standardmäßig, Standard-JS-Namen zu manipulieren ( --mangle-props builtinszum Überschreiben).

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

Ein regulärer Ausdruck kann verwendet werden, um zu definieren, welche Eigenschaftsnamen entstellt werden sollen. Beispielsweise --mangle-props regex=/^_/werden nur Eigenschaftsnamen entstellt, die mit einem Unterstrich beginnen.

Wenn Sie mit dieser Option mehrere Dateien komprimieren, müssen wir irgendwie sicherstellen, dass eine Eigenschaft in allen auf denselben Namen verstümmelt wird, damit sie am Ende zusammenarbeiten. Dazu --name-cache filename.json verwalten pass und UglifyJS diese Zuordnungen in einem 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.jshinsichtlich der verstümmelten Eigenschaftsnamen miteinander übereinstimmen.

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

Namen ohne Anführungszeichen verstümmeln ( --mangle-props keep_quoted)

Durch die Verwendung des Eigenschaftsnamens in Anführungszeichen ( o["foo"]) wird der Eigenschaftsname ( foo) reserviert, sodass er nicht im gesamten Skript verstümmelt wird, selbst wenn er in einem Stil ohne Anführungszeichen ( o.foo) verwendet wird. Beispiel:

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 übergeben, --mangle-props debugum Eigenschaftsnamen zu verstümmeln, ohne sie vollständig zu verdecken. Beispielsweise o.foo würde die Eigenschaft mit dieser Option verstümmelt werden o._$foo$_. Dies ermöglicht das Verstümmeln von Eigenschaften einer großen Codebasis und gleichzeitig die Möglichkeit, den Code zu debuggen und zu identifizieren, wo das Verstümmeln Probleme verursacht.

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 ein benutzerdefiniertes Suffix mit übergeben --mangle-props debug=XYZ. Dies würde dann o.foozu „mangling o._$foo$XYZ_“ werden. Sie können dies jedes Mal ändern, wenn Sie ein Skript kompilieren, um zu identifizieren, wie eine Eigenschaft entstellt wurde. Eine Technik besteht darin, bei jeder Kompilierung eine Zufallszahl zu übergeben, um die Änderung der Verstümmelung mit anderen zu simulieren Eingaben (z. B. wenn Sie das Eingabeskript mit neuen Eigenschaften aktualisieren) und um dabei zu helfen, Fehler wie das Schreiben entstellter Schlüssel in den Speicher zu erkennen.

API-Referenz

Unter der Annahme einer Installation über NPM können Sie UglifyJS wie folgt in Ihre Anwendung laden:

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

Es gibt eine einzelne High-Level-Funktion, die alle Minimierungsphasenminify(code, options) auf konfigurierbare Weise ausführt . Standardmäßig werden die Optionen und aktiviert . Beispiel: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}

Sie können minifymehr als eine JavaScript-Datei gleichzeitig erstellen, indem Sie als erstes Argument ein Objekt verwenden, bei dem 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 toplevelOption:

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 nameCacheOption:

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 Namencache auf folgende Weise im Dateisystem beibehalten:

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 gibt uglify-js@2.xdie 3.xAPI 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;

Minimierungsoptionen

  • warnings(Standard false) – übergeben 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 Parse-Optionen{} angeben möchten .

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

  • mangle(Standard true) – Übergeben , um das Verknüpfen von Namen zu überspringen, oder ein Objekt übergeben, um Mangle-Optionenfalse anzugeben (siehe unten).

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

  • sourceMap(Standard ) – Übergeben Sie ein Objekt, wenn Sie Optionen für die Quellzuordnungfalse angeben möchten .

  • toplevel(Standard false) – Setzen Sie diese Option true, wenn Sie das Manipulieren von Variablen- und Funktionsnamen auf oberster Ebene 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 beschädigte Variablen- und Eigenschaftsnamen über mehrere Aufrufe hinweg zwischenspeichern möchten minify(). Hinweis: Dies ist eine Lese-/Schreibeigenschaft. minify()Liest den Namen-Cache-Status dieses Objekts und aktualisiert es während der Minimierung, sodass es vom Benutzer wiederverwendet oder extern beibehalten werden kann.

  • ie8(Standard false) – auf Unterstützung von IE8 eingestellt true.

  • keep_fnames(Standard: false) – übergeben true, um das Verwerfen oder Verfälschen von Funktionsnamen zu verhindern. Nützlich für Code, der auf basiert 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 Quellkarte:

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 zum Festlegen //# sourceMappingURL=out.js.mapin verwendet result.code. Der Wert von filenamewird nur zum Festlegen von fileAttributen (siehe Spezifikation ) in der Quellzuordnungsdatei verwendet.

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

Sie können auch die Eigenschaft sourceRoot angeben, die in die Quellzuordnung einbezogen 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 über eine Quellzuordnung dafür verfügen, 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 X-SourceMapstattdessen den Header verwenden, können Sie ihn einfach weglassen sourceMap.url.

Parse-Optionen

  • bare_returns(Standard false) – unterstützt returnAnweisungen der obersten Ebene

  • html5_comments(Standard true)

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

Komprimierungsoptionen

  • arguments(Standard: ) – wann immer möglich durch den Namen des Funktionsparameters trueersetzen .arguments[index]

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

  • collapse_vars(Standard: true) – Reduziert nicht konstante Einmalvariablen, sofern Nebenwirkungen dies zulassen.

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

  • conditionals(Standard: true) – Optimierungen für if-s und bedingte Ausdrücke anwenden

  • dead_code(Standard: true) – Nicht erreichbaren Code entfernen

  • drop_console(Standard: false) – Übergeben true, um Aufrufe von Funktionen zu verwerfen console.*. Wenn Sie einen bestimmten Funktionsaufruf löschen möchten, z. B. console.infound/oder Nebenwirkungen von Funktionsargumenten nach dem Löschen des Funktionsaufrufs beibehalten möchten, verwenden Sie stattdessen pure_funcs.

  • drop_debugger(Standard: ) – Anweisungen trueentfernendebugger;

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

  • expression(Standard: false) – Übergeben true, um Vervollständigungswerte aus Terminalanweisungen ohne beizubehalten return, z. B. in Bookmarklets.

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

  • hoist_funs(Standard: false) – Hoist-Funktionsdeklarationen

  • hoist_props(Standard: true) – Hebt Eigenschaften von konstanten Objekt- und Array-Literalen in reguläre Variablen, 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: hoist_props Funktioniert am besten, wenn mangleaktiviert, die compressOption passesauf oder höher eingestellt 2und die compressOption toplevelaktiviert ist.

  • hoist_vars(Standard: false) – Hoist- varDeklarationen (dies ist false die Standardeinstellung, da 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-Funktionsaufrufe mit simple/ return-Anweisung:

    • false--gleich wie0
    • 0- Inlining deaktiviert
    • 1- Einfache Inline-Funktionen
    • 2– Inline-Funktionen mit Argumenten
    • 3– Inline-Funktionen mit Argumenten und Variablen
    • true--gleich wie3
  • join_vars(Standard: ) – aufeinanderfolgende Anweisungen trueverbindenvar

  • 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) – Übergeben 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 Option mangle .

  • keep_infinity(Standard: false) – Übergeben true, um zu verhindern Infinity, dass es in komprimiert wird 1/0, was zu Leistungsproblemen in Chrome führen kann.

  • loops(Standard: true) – Optimierungen für und Schleifen do, wenn wir die Bedingung statisch bestimmen können.whilefor

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

  • passes(Standard: 1) – Die maximale Häufigkeit, mit der compress ausgeführt werden soll. In manchen Fällen führt mehr als ein Durchgang zu weiter komprimiertem Code. Beachten Sie, dass mehrere Durchgänge mehr Zeit in Anspruch nehmen.

  • properties(Standard: true) – Schreiben Sie den Eigenschaftszugriff beispielsweise mithilfe der Punktnotation umfoo["bar"] → foo.bar

  • pure_funcs(Standard:) null– Sie können ein Array von Namen übergeben und UglifyJS geht davon aus, dass diese Funktionen keine Nebenwirkungen erzeugen. GEFAHR: Es wird nicht geprüft, ob der Name im Gültigkeitsbereich neu definiert ist. Ein Beispielfall hier, zum Beispiel. var q = Math.floor(a/b)Wenn Variable qist Wenn es nicht an anderer Stelle verwendet wird, löscht UglifyJS es, behält aber trotzdem das Math.floor(a/b), ohne zu wissen, was es tut. Sie können übergeben, pure_funcs: [ 'Math.floor' ]um ihm mitzuteilen, dass diese Funktion keine Nebenwirkungen hervorruft. In diesem Fall würde die gesamte Anweisung verworfen Die aktuelle Implementierung verursacht etwas Overhead (die Komprimierung wird langsamer sein). Stellen Sie sicher, dass die Symbole darunter pure_funcs auch darunter sind mangle.reserved, um ein Verstümmeln zu vermeiden.

  • pure_getters(Standard: "strict") – Wenn Sie truedies bestehen, geht UglifyJS davon aus, dass der Objekteigenschaftenzugriff (z. B. foo.baroder foo["bar"]) keine Nebenwirkungen hat. Geben Sie an, dass er nur dann als nebenwirkungsfrei "strict"behandelt werden soll , wenn sicher ist, dass er nicht ausgelöst wird, d. h. nicht oder .foo.barfoonullundefined

  • reduce_funcs(Standard: true) – Ermöglicht die Einbindung von Einmalfunktionen als Funktionsausdrücke, wenn dies zulässig ist, was eine weitere Optimierung ermöglicht. Standardmäßig aktiviert. Option hängt von der reduce_vars Aktivierung ab. Einige Codes werden in der Chrome V8-Engine schneller ausgeführt, wenn diese Option deaktiviert ist. Nicht wirkt sich negativ auf andere gängige Browser aus.

  • reduce_vars(Standard: true) – Verbessert die Optimierung von Variablen, denen konstante Werte zugewiesen und als solche verwendet werden.

  • sequences(Standard: true) – Verbinde aufeinanderfolgende einfache Anweisungen mit dem Kommaoperator. Kann auf eine positive Ganzzahl gesetzt werden, um die maximale Anzahl aufeinanderfolgender Kommasequenzen anzugeben, die generiert werden. Wenn diese Option auf eingestellt ist, ist trueder Standardgrenzwert . Option festlegen zu oder zum Deaktivieren. Die kleinste Länge ist . Ein Wert von hat einen Bestandsschutz, der äquivalent zu ist und als solcher bedeutet . In seltenen Fällen führt die Standardsequenzbeschränkung zu sehr langsamen Komprimierungszeiten. In diesem Fall wird ein Wert von oder weniger empfohlen.sequences200false0sequences2sequences1true20020

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

  • switches(Standard: true) – Deduplizieren und entfernen Sie nicht erreichbare switchZweige

  • toplevel(Standard: false) – nicht referenzierte Funktionen ( "funcs") und/oder Variablen ( "vars") im Bereich der obersten Ebene löschen ( falsestandardmäßig, trueum sowohl nicht referenzierte Funktionen als auch Variablen zu löschen)

  • top_retain(Standard null:) – Verhindert das Entfernen bestimmter Funktionen und Variablen der obersten Ebene unused(kann ein Array, durch Kommas getrennt, RegExp oder eine Funktion sein. Impliziert toplevel)

  • typeofs(Standard: true) – Verwandelt sich typeof foo == "undefined"in . Hinweis: Aufgrund bekannter Probleme foo === void 0wird empfohlen, diesen Wert für IE10 und frühere Versionen auf festzulegen .false

  • unsafe(Standard: false) – „unsichere“ Transformationen anwenden (Diskussion unten)

  • unsafe_comps(Standard: false) – komprimiert Ausdrücke wie a <= bdie Annahme, dass keiner der Operanden erzwungen werden kann NaN.

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

  • unsafe_math(Standard: false) – optimiert numerische Ausdrücke wie 2 * x * 3in 6 * x, was zu ungenauen Gleitkomma-Ergebnissen führen kann.

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

  • unsafe_regexp(Standard: false) – ermöglicht die Ersetzung von Variablen durch RegExpWerte auf die gleiche Weise, als wären sie Konstanten.

  • unsafe_undefined(Standard: false) – ersetzt void 0, wenn im Gültigkeitsbereich eine Variable mit Namen vorhanden ist undefined(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, sofern sie nicht auf festgelegt sind "keep_assign")

  • warnings(Standard: false) – Warnungen anzeigen, wenn nicht erreichbarer Code oder nicht verwendete Deklarationen usw. gelöscht werden.

Mangle-Optionen

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

  • keep_fnames(Standard false) – Wird übergeben true, um Funktionsnamen nicht zu manipulieren. Nützlich für Code, der auf basiert Function.prototype.name. Siehe auch: die keep_fnames Option compress .

  • reserved(Standard []) – Übergeben Sie ein Array von Bezeichnern, die vom Mangling ausgeschlossen werden sollen. Beispiel: ["foo", "bar"].

  • toplevel(Standard false) – Wird truean Mangle-Namen übergeben, 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) – Wird verwendet true, um die Verstümmelung integrierter DOM-Eigenschaften zu ermöglichen. Es wird nicht empfohlen, diese Einstellung zu überschreiben.

  • debug(Standard:) false– Namen verfälschen, wobei der ursprüngliche Name noch vorhanden ist. Übergeben Sie eine leere Zeichenfolge ""zum Aktivieren oder eine nicht leere Zeichenfolge, um das Debug-Suffix festzulegen.

  • keep_quoted(Standard: false) – Nur Eigenschaftsnamen ohne Anführungszeichen verstümmeln.

  • regex(Standard: null) – Übergeben Sie ein RegExp-Literal, um nur Eigenschaftsnamen zu manipulieren, die mit dem regulären Ausdruck übereinstimmen.

  • reserved(Standard: []) – Im Array aufgeführte Eigenschaftsnamen nicht verfälschen reserved.

Ausgabeoptionen

Der Codegenerator versucht standardmäßig, den kürzestmöglichen Code auszugeben. Wenn 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 Zeichenfolgen und regulären Ausdrücken (betrifft Anweisungen, bei denen Nicht-ASCII-Zeichen ungültig werden)

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

  • braces(Standard false) – Fügen Sie immer geschweifte Klammern in , if, foroder Anweisungen ein, auch wenn deren Text eine einzelne Anweisung ist.dowhilewith

  • comments(Standard false) – Übergeben Sie trueoder "all", um alle Kommentare, "some"einige Kommentare, eine reguläre Ausdruckszeichenfolge (z. B. /^!/) oder eine Funktion beizubehalten.

  • indent_level(Standard 4)

  • indent_start(Standard 0) – Stellen Sie allen Zeilen so viele Leerzeichen voran

  • inline_script(Standard true) – HTML-Kommentare und den Schrägstrich beim Vorkommen von </script>In-Strings maskieren

  • keep_quoted_props(Standard false) – verhindert bei Aktivierung das Entfernen von Anführungszeichen aus Eigenschaftsnamen in Objektliteralen.

  • max_line_len(Standard false) – maximale Zeilenlänge (für unleserlichen Code)

  • preamble(Standard null) – Bei der Übergabe muss es sich um eine Zeichenfolge handeln und sie wird der Ausgabe wörtlich vorangestellt. Die Quellzuordnung wird an diesen Text angepasst. Kann beispielsweise zum Einfügen eines Kommentars mit Lizenzinformationen verwendet werden.

  • preserve_line(Standard false) – übergeben true, um Zeilen beizubehalten, aber es funktioniert nur, wenn beautifyes auf eingestellt ist false.

  • quote_keys(Standard false) – übergeben true, um alle Schlüssel in Literalobjekten in Anführungszeichen zu setzen

  • quote_style(Standard 0) – bevorzugter Anführungszeichenstil für Zeichenfolgen (betrifft auch in Anführungszeichen gesetzte Eigenschaftsnamen und Anweisungen):

    • 0-- bevorzugt doppelte Anführungszeichen, wechselt zu einfachen Anführungszeichen, wenn die Zeichenfolge selbst mehr doppelte Anführungszeichen enthält. 0Ist am besten für die GZIP-Größe geeignet.
    • 1– Verwenden Sie immer einfache Anführungszeichen
    • 2– Verwenden Sie immer doppelte Anführungszeichen
    • 3– Verwenden Sie immer die Originalzitate
  • semicolons(Standard true) – getrennte Anweisungen durch Semikolons. Wenn Sie übergeben, falseverwenden wir wann immer möglich eine neue Zeile anstelle eines Semikolons, was zu einer besser lesbaren Ausgabe von unleserlichem Code führt (Größe vor gzip könnte kleiner sein; Größe nach gzip unwesentlich größer).

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

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

  • width(Standard 80) – wird nur wirksam, wenn die Verschönerung aktiviert ist. Dies gibt eine (orientierende) Linienbreite an, die der Verschönerer zu befolgen versucht. Es bezieht sich auf die Breite des Zeilentexts (ohne Einrückungen). Es funktioniert nicht sehr gut derzeit, aber es macht den von UglifyJS generierten Code besser lesbar.

  • wrap_iife(Standard false) – übergeben true, um sofort aufgerufene Funktionsausdrücke einzuschließen. Weitere Einzelheiten finden Sie unter #640 .

Verschiedenes

Sie können übergeben --comments, um bestimmte Kommentare in der Ausgabe beizubehalten. Standardmäßig werden Kommentare im JSDoc-Stil beibehalten, die „@preserve“, „@license“ oder „@cc_on“ (bedingte Kompilierung für IE) enthalten. Sie können übergeben, um --comments allalle beizubehalten Kommentare oder einen gültigen JavaScript-Regexp, um nur Kommentare zu behalten, die mit diesem Regexp übereinstimmen. --comments /^!/ Behält beispielsweise 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(); }

Auch wenn „@preserve“ vorhanden ist, 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 Urheberrechtsinformationen (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 zerstören könnten, sollte aber für den meisten Code in Ordnung sein. Vielleicht möchten Sie 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 dienew

Conditional compilation

Sie können den Schalter --define( -d) verwenden, um globale Variablen zu deklarieren, von denen UglifyJS annimmt, dass sie Konstanten sind (sofern sie nicht im Gültigkeitsbereich definiert sind). Wenn Sie beispielsweise --define DEBUG=falsethen übergeben und toten Code entfernen, verwirft UglifyJS Folgendes aus der Ausgabe:

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

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

UglifyJS warnt, dass die Bedingung immer falsch ist und dass nicht erreichbarer Code gelöscht wird. Im Moment gibt es keine Option, nur diese spezielle Warnung zu deaktivieren. Sie können alle Warnungen warnings=falsedeaktivieren .

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

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

und bauen Sie Ihren Code wie folgt auf:

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 darauf auf den Wert selbst auswerten und wie üblich nicht erreichbaren Code verwerfen. Der Build enthält die constDeklarationen, wenn Sie sie verwenden. Wenn Sie auf < ES6-Umgebungen abzielen, ist dies der Fall nicht unterstützt const, sollte die Verwendung varvon with reduce_vars(standardmäßig aktiviert) ausreichen.

Conditional compilation API

Sie können die bedingte Kompilierung auch über die programmgesteuerte API verwenden. Mit dem Unterschied, dass der Eigenschaftsname global_defseine Kompressoreigenschaft 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 werden:

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

Verwendung von nativem Uglify AST mitminify()

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

Transversal und Transformation des nativen AST können durch bzw. durchgeführt TreeWalkerwerden TreeTransformer .

ESTree / SpiderMonkey AST

UglifyJS verfügt über ein eigenes abstraktes Syntaxbaumformat. Aus praktischen Gründen können wir intern nicht einfach auf die Verwendung des SpiderMonkey AST umsteigen. Allerdings verfügt UglifyJS jetzt über einen Konverter, der einen SpiderMonkey AST importieren kann.

Acorn ist beispielsweise ein superschneller Parser, der einen SpiderMonkey-AST erzeugt. Er verfügt über ein kleines CLI-Dienstprogramm, das eine Datei analysiert und den AST in JSON auf der Standardausgabe ausgibt. So verwenden Sie UglifyJS, um das zu manipulieren und zu komprimieren:

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

Die -p spidermonkeyOption teilt UglifyJS mit, dass alle Eingabedateien kein JavaScript, sondern JS-Code sind, der in SpiderMonkey AST in JSON beschrieben wird. 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 für die gesamte Analyse verwendet. Wenn Sie diese Option übergeben, wird UglifyJS require("acorn").

Acorn ist wirklich schnell (z. B. 250 ms statt 380 ms bei einem 650-KByte-Code), aber die Konvertierung des von Acorn erstellten SpiderMonkey-Baums dauert weitere 150 ms, sodass es insgesamt etwas mehr ist, als nur den eigenen Parser von UglifyJS zu verwenden.

Uglify Fast Minify Mode

Es ist nicht bekannt, aber die Entfernung von Leerzeichen und das Verstümmeln von Symbolen machen bei den meisten JavaScript-Codes 95 % der Größenreduzierung im minimierten Code aus – keine aufwändigen Codetransformationen. Man kann sie einfach deaktivieren, um compressUglify-Builds um das Drei- bis Vierfache zu beschleunigen. In diesem schnellen mangle- Nur der Uglify-Modus verfügt über vergleichbare Minimierungsgeschwindigkeiten und GZIP-Größen wie butternut:

d3.js Größe minimieren gzip-Größe Zeit minimieren (Sekunden)
Original 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
Butternuss@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

Um den schnellen Minimierungsmodus über die CLI zu aktivieren, verwenden Sie:

1
uglifyjs file.js -m

Um den schnellen Minimierungsmodus mit der API zu aktivieren, verwenden Sie:

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

Quellkarten und Debugging

Verschiedene compressTransformationen, die Code vereinfachen, neu anordnen, einbinden und entfernen, wirken sich bekanntermaßen nachteilig auf das Debuggen mit Quellzuordnungen aus. Dies ist zu erwarten, da der Code optimiert ist und Zuordnungen oft einfach nicht möglich sind, da ein Teil des Codes nicht mehr vorhanden ist. Für höchste Wiedergabetreue im Quellcode Beim Map-Debugging deaktivieren Sie die Uglify- compressOption und verwenden Sie einfach mangle.

Compiler assumptions

Um bessere Optimierungen zu ermöglichen, geht der Compiler von verschiedenen Annahmen aus:

  • .toString()und .valueOf()haben keine Nebenwirkungen, und für integrierte Objekte wurden sie nicht überschrieben.
  • undefinedund wurden nicht extern neu definiert NaN.Infinity
  • arguments.callee, arguments.callerund Function.prototype.callerwerden nicht verwendet.
  • Der Code erwartet nicht, dass der Inhalt etwas Bestimmtes ist Function.prototype.toString()oder Error.prototype.stackdass es sich um etwas Bestimmtes handelt.
  • Das Abrufen und Festlegen von Eigenschaften für ein einfaches Objekt verursacht keine anderen Nebenwirkungen (Verwendung von .watch()oder Proxy).
  • Objekteigenschaften können hinzugefügt, entfernt und geändert werden (nicht verhindert mit , Object.defineProperty(), Object.defineProperties()oder ) .Object.freeze()Object.preventExtensions()Object.seal()