Fantastisches Community-Modul

UglifyJS 3

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

Hinweis:

  • uglify-js@3hat eine vereinfachte API und CLI , die nicht abwärtskompatibel istuglify-js@2 .
  • Die Dokumentation zu UglifyJS- 2.xVersionen 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

Befehlszeilenverwendung

1
uglifyjs [input files] [options]

UglifyJS kann mehrere Eingabedateien aufnehmen. Es wird empfohlen, zuerst die Eingabedateien und dann die Optionen zu übergeben. UglifyJS analysiert die Eingabedateien nacheinander und wendet alle Komprimierungsoptionen an. Die Dateien werden im selben globalen Bereich analysiert, dh als Referenz Von einer Datei zu einer Variablen / Funktion, die in einer anderen Datei deklariert ist, 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-Quellkartenoptionen

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

Zusätzliche Optionen:

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

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

  • --source-map "url='<URL>'"Angabe der URL, unter der sich die Quellzuordnung X-SourceMapbefindet . Andernfalls geht UglifyJS davon aus, dass HTTP verwendet wird, und lässt die //# sourceMappingURL=Anweisung 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 komprimiert und entstellt file1.jsund file2.jslöscht die Ausgabe foo.min.jsund die Quellzuordnung 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 werden sie http://foo.com/src als Stamm der Stammzuordnung 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. Stattdessen möchten Sie den ursprünglichen Code (z. B. CoffeeScript) wieder zuordnen. UglifyJS verfügt über eine Option zum Erstellen einer Eingabequellenzuordnung. Angenommen, 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 diese Funktion zu verwenden, übergeben Sie --source-map "content='/path/to/input/source.map'" oder --source-map "content=inline"ob die Quellkarte in den Quellen enthalten ist.

CLI-Komprimierungsoptionen

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

Optionen sind in der Form foo=baroder nur foo(letztere impliziert eine boolesche Option, die Sie festlegen möchten true; es ist effektiv eine Verknüpfung für foo=true).

Beispiel:

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

CLI-Mangle-Optionen

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

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

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

Wenn das Mangeln aktiviert ist, Sie jedoch verhindern möchten, dass bestimmte Namen entstellt werden, können Sie diese Namen mit --mangle reserved- deklarieren Sie eine durch Kommas getrennte Liste von Namen deklarieren . Beispiel:

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

zu verhindern , dass das require, exportsund $von Namen geändert werden.

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

Hinweis: Dies wird wahrscheinlich Ihren Code unterbrechen. Das Mangeln von Eigenschaftsnamen ist ein separater Schritt, der sich vom Mangeln von Variablennamen unterscheidet. Übergeben --mangle-propsSie ihn, um ihn zu aktivieren. Es werden alle Eigenschaften im Eingabecode mit Ausnahme der integrierten DOM-Eigenschaften und -Eigenschaften in Kern-JavaScript entstellt 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 (außer JavaScript builtins) entstellen :

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

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

Zerfleischen Sie 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 Optionen für Mangeleigenschaften:

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 Verfälschen von Standard-JS-Namen ( --mangle-props builtinszum Überschreiben).

Es wird eine Standardausschlussdatei bereitgestellt, in tools/domprops.jsonder die meisten in verschiedenen Browsern definierten Standard-JS- und DOM-Eigenschaften behandelt werden sollen. --mangle-props dompropsÜbergeben Sie diese Funktion, um sie 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 mehrere Dateien mit dieser Option komprimieren, müssen wir sicherstellen, dass eine Eigenschaft in allen Dateien mit demselben Namen --name-cache filename.json beschädigt wird, damit sie am Ende zusammenarbeiten. Aus diesem Grund behalten pass und UglifyJS diese Zuordnungen in a bei 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 part1.jsund part2.jswird in Bezug auf verstümmelte Eigenschaftsnamen miteinander konsistent sein.

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

Nicht zitierte Namen entstellen ( --mangle-props keep_quoted)

Wenn Sie den in Anführungszeichen gesetzten Eigenschaftsnamen ( o["foo"]) verwenden, wird der Eigenschaftsname ( foo) so reserviert , dass er nicht im gesamten Skript beschädigt wird, selbst wenn er in einem nicht in Anführungszeichen gesetzten Stil ( 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 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. wenn Sie das Eingabeskript mit neuen Eigenschaften aktualisieren) und um Fehler wie das Schreiben von verstümmelten Schlüsseln in den Speicher zu identifizieren.

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 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 minifymehrere JavaScript-Dateien gleichzeitig erstellen, indem Sie ein Objekt für das erste Argument 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 Namenscache 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 erstellen 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 zur `uglify-js@2.x, the 3.x`-API werden keine Fehler ausgegeben. Um einen ähnlichen Effekt zu erzielen, können Sie Folgendes tun:

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

Optionen minimieren

  • warnings(Standard false) - Übergeben true, um Kompressorwarnungen 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 Mangelnamen zu überspringen, oder Übergeben eines Objekts, um Mangelnamen 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(Standard false) - Übergeben Sie ein Objekt, wenn Sie Optionen für die Quellzuordnung angeben möchten .

  • toplevel(Standard false) - Setzen trueSie diese Option auf, wenn Sie die Verwaltung von Variablen- und Funktionsnamen der obersten 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 von zwischenspeichern möchten minify(). Hinweis: Dies ist eine Lese- / Schreibeigenschaft. minify()Liest den Namen-Cache-Status dieses Objekts und aktualisiert ihn während der Minimierung, damit es vom Benutzer wiederverwendet oder extern beibehalten werden kann.

  • ie8(Standard false) -Satz truezur Unterstützung von IE8.

  • keep_fnames(Standard false:) -pass true, um das Verwerfen oder Verfälschen von Funktionsnamen zu verhindern. Nützlich für Code, auf den man sich verlässt 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 erstellen 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 Quelle Karte nicht in einer Datei gespeichert wird, ist es nur wieder in result.map. Der übergebene Wert für sourceMap.urlwird nur Satz verwendet //# sourceMappingURL=out.js.mapin result.code. Der Wert filenamewird nur Satz verwendet fileAttribut (siehe die Spezifikation ) in Source Map - Datei.

Sie können die Option sourceMap.urlso "inline"einstellen, dass die Quellkarte 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 ihn einfach weglassen sourceMap.url.

Analyseoptionen

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

  • html5_comments(Standard true)

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

Optionen komprimieren

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

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

  • collapse_vars(Standard true:) - Reduzieren Sie nicht konstante Einwegvariablen, sofern die Nebenwirkungen dies zulassen.

  • comparisons(Standard true:) - Wenden Sie 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). B. 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 an console.*Funktionen zu verwerfen . Wenn Sie einen bestimmten Funktionsaufruf wie z. B. console.infound / oder Nebenwirkungen von Funktionsargumenten nach dem Löschen des Funktionsaufrufs beibehalten möchten, 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 Abschlusswerte aus Terminalanweisungen ohne return, z. B. in Lesezeichen, beizubehalten.

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

  • hoist_funs(Standard false:) - Deklarationen der Hubfunktion

  • hoist_props(Standard true:) - Hebeeigenschaften 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 konvertiert in 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:) - Hebezeugdeklarationen var(dies ist false standardmäßig der Fall, da dies 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, um mit simple / returnAnweisung zu funktionieren :

    • 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:) - Join aufeinanderfolgende varAnweisungen

  • 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, auf den man sich verlässt Function.prototype.name. Siehe auch: die keep_fnames Mangle-Option .

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

  • loops(default true:) - Optimierungen für do, whileund forSchleifen , wenn wir den Zustand statisch bestimmen können.

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

  • passes(Standard :) 1- Die maximale Häufigkeit, mit der die Komprimierung ausgeführt wird. In einigen Fällen führt mehr als ein Durchgang zu weiter komprimiertem Code. Beachten Sie, dass mehr Durchgänge mehr Zeit in Anspruch nehmen.

  • properties(Standard true:) - Schreiben Sie den Eigenschaftszugriff beispielsweise mit der Punktnotation neufoo["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 hervorrufen. GEFAHR: Überprüft nicht, ob der Name im Gültigkeitsbereich neu definiert wurde. Ein Beispiel hier, z. B. var q = Math.floor(a/b)Wenn Variable qnicht Wenn UglifyJS an anderer Stelle verwendet wird, wird es gelöscht, es bleibt jedoch erhalten Math.floor(a/b), ohne zu wissen, was es tut. Sie können übergeben pure_funcs: [ 'Math.floor' ], um es darüber zu informieren, dass diese Funktion keine Nebenwirkungen hervorruft. In diesem Fall wird die gesamte Anweisung verworfen Implementierung fügt einige Overhead (Komprimierung langsamer sein wird ). Achten Sie darauf , Symbole unter pure_funcs auch unter mangle.reservedzu vermeiden Mangeln.

  • pure_getters(Standard :) "strict"- Wenn Sie truedies bestehen, geht UglifyJS davon aus, dass der Zugriff auf Objekteigenschaften (z. B. foo.baroder foo["bar"]) keine Nebenwirkungen hat. Geben Sie an, dass diese nur dann als nebenwirkungsfrei "strict"behandelt werden sollen, foo.barwenn foosicher ist, dass sie nicht ausgelöst werden, dh nicht nulloder undefined.

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

  • reduce_vars(Standard true:) - Verbessern Sie die Optimierung von Variablen, denen konstante Werte zugewiesen und als solche 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 zu deaktivieren. Die kleinste sequencesLänge ist 2. Ein sequencesWert von 1 ist großväterlich, um äquivalent zu sein trueund als solches bedeutet 200. In seltenen Fällen führt die Begrenzung der Standardsequenzen zu sehr langsamen Komprimierungszeiten. In diesem Fall wird ein Wert von 20oder weniger empfohlen.

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

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

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

  • top_retain(Standard null:) - Verhindert das Entfernen bestimmter Funktionen und Variablen auf oberster Ebene unused(kann Array, durch Kommas getrennt, RegExp oder Funktion sein. Impliziert toplevel)

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

  • unsafe(Standard false:) - "unsichere" Transformationen anwenden (Diskussion unten)

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

  • unsafe_Function(default false:) - Kompresse und mangle , Function(args, code) wenn beide argsund codeStringliterale sind.

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

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

  • unsafe_regexp(Standard false:) - Aktivieren Sie das Ersetzen von Variablen mit RegExpWerten auf die gleiche Weise, als wären sie Konstanten.

  • unsafe_undefined(Standard false:) - Ersetzen, void 0wenn undefinedim Gültigkeitsbereich eine Variable benannt ist (Variablenname wird entstellt, 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. gelöscht werden.

Mangle Optionen

  • eval(Standard false) - Übergabe truean Mangelnamen, die in Bereichen angezeigt werden, in denen evaloder withverwendet werden.

  • keep_fnames(Standard false) - trueÜbergeben, um Funktionsnamen nicht zu entstellen. Nützlich für Code, auf den Sie sich verlassen können Function.prototype.name. Siehe auch: die keep_fnames Komprimierungsoption .

  • reserved(Standard []) - Pass AN sein soll Array von Identifikatoren , dass mangling aus Beispiel :. ausgeschlossen ["foo", "bar"].

  • toplevel(Standard false) - Übergabe truean Mangelnamen, die im Bereich der obersten Ebene deklariert wurden.

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- Verwenden Sie truediese Option, um das Mangeln der integrierten DOM-Eigenschaften zuzulassen. Es wird nicht empfohlen, diese Einstellung zu überschreiben.

  • debug(Standard false:) - Mangelnamen mit dem ursprünglichen Namen noch vorhanden. Übergeben Sie eine leere Zeichenfolge ""zum Aktivieren oder eine nicht leere Zeichenfolge zum Festlegen des Debug-Suffix.

  • keep_quoted(Standard false:) -— Nur nicht zitierte Eigenschaftsnamen entstellen.

  • regex(Standard null:) - Übergeben Sie ein RegExp-Literal nur an Mangle-Eigenschaftsnamen, die dem regulären Ausdruck entsprechen.

  • reserved(Standard []:) - Verfälschen Sie die im reservedArray aufgelisteten Eigenschaftsnamen nicht .

Ausgabeoptionen

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

  • ascii_only(Standard false) - Escape-Unicode-Zeichen in Zeichenfolgen und regulären Ausdrücken (wirkt sich auf Anweisungen aus, bei denen Nicht-ASCII-Zeichen ungültig werden).

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

  • braces(default false) - immer in INSERT Klammern if, for, do, whileoder withAussagen, die auch Ihr Körper ist eine einzelne IF - Anweisung.

  • comments(Standard false) - Übergeben trueoder "all"zum Beibehalten aller Kommentare, "some"zum Beibehalten einiger Kommentare, einer Zeichenfolge für reguläre Ausdrücke (z. B. /^!/) oder einer Funktion.

  • indent_level(Standard 4)

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

  • inline_script(Standard true) - Escape-HTML-Kommentare und der Schrägstrich beim Auftreten von </script>In-Strings

  • keep_quoted_props(Standard false) - Verhindert beim Aktivieren 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) - Bei der Übergabe muss es sich um eine Zeichenfolge handeln, die der Ausgabe buchstäblich vorangestellt wird. Die Quellzuordnung wird an diesen Text angepasst. Kann zum Einfügen eines Kommentars verwendet werden, der beispielsweise Lizenzinformationen enthält.

  • preserve_line(Standard false) - übergeben true, um Zeilen beizubehalten, aber es funktioniert nur, wenn eingestellt beautifyist 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 (wirkt sich auch auf zitierte Eigenschaftsnamen und Direktiven aus):

    • 0- bevorzugt doppelte Anführungszeichen, wechselt zu einfachen Anführungszeichen, wenn die Zeichenfolge selbst mehr doppelte Anführungszeichen enthält. 0Dies ist am besten für die Größe von gzip geeignet.
    • 1 - Verwenden Sie immer einfache Anführungszeichen
    • 2 - Verwenden Sie immer doppelte Anführungszeichen
    • 3 - Verwenden Sie immer die Originalzitate
  • semicolons(Standard true) - separate Anweisungen mit Semikolons. Wenn Sie übergeben false, verwenden wir nach Möglichkeit eine neue Zeile anstelle eines Semikolons, was zu einer besser lesbaren 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 der Präambel beibehalten (Bash-Skripte)

  • webkit(Standard false) - Aktivieren Sie Problemumgehungen für WebKit-Fehler. PhantomJS-Benutzer sollten diese Option auf setzen true.

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

  • wrap_iife(Standard false) - Übergeben true, um sofort aufgerufene Funktionsausdrücke zu verpacken. Weitere Informationen finden Sie unter # 640 .

Sonstiges

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 --comments all, um alle Kommentare beizubehalten Kommentare oder ein gültiger JavaScript-Regexp, um nur Kommentare beizubehalten, die mit diesem Regexp übereinstimmen. Zum Beispiel --comments /^!/ werden Kommentare wie beibehalten /*! Copyright Notice */.

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

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

Obwohl "@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 Copyright-Informationen (oder anderen Informationen, die in der Ausgabe aufbewahrt 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 erfundenen Fällen möglicherweise die Codelogik beschädigen, für den meisten Code jedoch in Ordnung sein sollten. Wenn Sie es mit Ihrem eigenen Code versuchen möchten, sollte dies die minimierte Größe verringern. 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, von denen UglifyJS annimmt, dass sie Konstanten sind (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 aufzunehmen. Beispielsweise können Sie eine build/defines.jsDatei mit den folgenden Eigenschaften 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 bemerkt die Konstanten und wertet, da sie nicht geändert werden können, Verweise auf den Wert selbst aus und löscht wie gewohnt nicht erreichbaren Code. Der Build enthält die constDeklarationen, wenn Sie sie verwenden. Wenn Sie auf <ES6-Umgebungen abzielen, die dies tun Nicht unterstützt const, sollte die Verwendung varmit reduce_vars(standardmäßig aktiviert) ausreichen.

Conditional compilation API

Sie können die bedingte Kompilierung auch über die programmatische API verwenden. Mit dem Unterschied, dass der Eigenschaftsname global_defseine Kompressoreigenschaft 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 Zeichenfolgenliteral 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 Syntaxbaumformat. Aus praktischen Gründen können wir nicht einfach auf die interne Verwendung des 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. Er verfügt über ein kleines CLI-Dienstprogramm, das eine Datei analysiert und den AST in JSON in der Standardausgabe speichert. So verwenden Sie UglifyJS, um Folgendes zu entstellen 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 wird. Daher verwenden wir in diesem Fall keinen eigenen Parser, sondern transformieren diesen AST einfach in unseren internen AST.

Use Acorn for parsing

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

Acorn ist sehr schnell (z. B. 250 ms anstelle von 380 ms bei 650K-Code), aber das Konvertieren des von Acorn erzeugten SpiderMonkey-Baums dauert weitere 150 ms. Insgesamt ist es also etwas mehr als nur die Verwendung des UglifyJS-eigenen Parsers.

Uglify Fast Minify Mode

Es ist nicht bekannt, aber Leerzeichen Entfernen und Symbol - Konten von für MOST JavaScript in minimierte Code an der Zerkleinerungs für 95% Mangeln . - Nicht Aufwendige Code der TRANSFORMS Man kann einfach deaktivieren compresszu beschleunigen uglify von 3 bis 4 mal im Stand des bauen Dies ist der mangleSCHNELLE Modus. Uglify hat 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
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

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 wird erwartet, da der Code optimiert ist und Zuordnungen häufig einfach nicht möglich sind, da ein Teil des Codes nicht mehr vorhanden ist. Für höchste Wiedergabetreue Map-Debugging deaktivieren Sie die compressOption Uglify und verwenden Sie 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 eingebaute Objekte wurden sie nicht überschrieben.
  • undefined, NaNUnd Infinitynicht von außen neu definiert wurde.
  • arguments.callee, arguments.callerUnd Function.prototype.callerwerden nicht verwendet.
  • Der Code erwartet nicht, dass der Inhalt von Function.prototype.toString()oder Error.prototype.stacketwas Besonderes ist.
  • Das Abrufen und Festlegen von Eigenschaften für ein einfaches Objekt verursacht keine anderen Nebenwirkungen (mit .watch()oder Proxy).
  • Können die Eigenschaften Objekt, entfernt und modifiziert (nicht verhindert mit zugesetztem Object.defineProperty(), Object.defineProperties(), Object.freeze(), Object.preventExtensions()oder Object.seal()).