Fantastisches Community-Modul

UglifyJS 3

UglifyJS ist ein JavaScript-Toolkit für Parser, Minifier, Kompressor und Verschönerer.

Hinweis:

  • uglify-js@3 verfügt über eine vereinfachte API und CLI , die nicht abwärtskompatibel mit uglify-js@2 .
  • Die Dokumentation zu UglifyJS 2.x Versionen finden Sie hier .
  • uglify-js unterstützt nur JavaScript (ECMAScript 5).
  • To minify ECMAScript 2015 or above , 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.

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

CLI-Quellkartenoptionen

UglifyJS kann eine Quellzuordnungsdatei generieren, die zum Debuggen Ihres komprimierten JavaScript sehr nützlich ist. Um eine --source-map --output output.js zu erhalten, übergeben Sie --source-map --output output.js (die --source-map --output output.js wird in output.js.map ) .

Zusatzoptionen:

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

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

  • --source-map "url='<URL>'" , um die URL anzugeben, unter der sich die X-SourceMap befindet. Andernfalls geht UglifyJS davon aus, dass HTTP X-SourceMap wird, und lässt die Anweisung //# sourceMappingURL= .

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 oben file1.js komprimiert und file1.js und file2.js , file2.js die Ausgabe in foo.min.js und die foo.min.js.map in foo.min.js.map . Die foo.min.js.map bezieht sich auf http://foo.com/src/js/file1.js und http://foo.com/src/js/file2.js (tatsächlich werden http://foo.com/src als http://foo.com/src/js/file1.js und die Originaldateien als aufgeführt js/file1.js und 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 Wenn Sie eine Zuordnung von CoffeeScript → kompiliertem JS haben, kann UglifyJS eine Zuordnung von CoffeeScript → komprimiertem JS generieren, indem Sie jedes Token im kompilierten JS seinem ursprünglichen Speicherort zuordnen.

Um diese Funktion zu verwenden, übergeben Sie --source-map "content='/path/to/input/source.map'" oder --source-map "content=inline" wenn die --source-map "content=inline" inline mit den Quellen enthalten 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 nur foo (letzteres impliziert eine boolesche Option, die Sie auf true setzen möchten; 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 --mangle ( -m ) übergeben. Die folgenden (durch Kommas getrennten) Optionen werden unterstützt:

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

  • eval (Standardwert false ) - Mangle-Namen, die in Bereichen sichtbar sind, in denen eval oder with verwendet werden.

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

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

Um zu verhindern, dass die require geändert werden, werden exports und $ -Namen geändert.

Namen von CLI-Mangling-Eigenschaften ( --mangle-props )

Hinweis: Dies wird wahrscheinlich Ihren Code unterbrechen. Das Mangeln von Eigenschaftsnamen ist ein separater Schritt, der sich vom Mangeln von Variablennamen unterscheidet. --mangle-props Sie --mangle-props , um ihn zu aktivieren. Es werden alle Eigenschaften im Eingabecode mit Ausnahme der integrierten DOM-Eigenschaften --mangle-props und Eigenschaften in JavaScript-Kernklassen. 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 ( mit Ausnahme von 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 reserved Eigenschaften 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._());

Mangle alle Eigenschaften passend zu einer 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 --mangle-props builtins von Standard-JS-Namen ( --mangle-props builtins zum Überschreiben).

In tools/domprops.json eine Standardausschlussdatei bereitgestellt, die die meisten in verschiedenen Browsern definierten Standard-JS- und DOM-Eigenschaften tools/domprops.json sollte. --mangle-props domprops , um diese Funktion zu deaktivieren.

Ein regulärer Ausdruck kann verwendet werden, um zu definieren, welche Eigenschaftsnamen --mangle-props regex=/^_/ werden sollen. Beispielsweise werden mit --mangle-props regex=/^_/ nur Eigenschaftsnamen --mangle-props regex=/^_/ , 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 sie am Ende zusammenarbeiten. --name-cache filename.json Sie dazu --name-cache filename.json und UglifyJS verwaltet diese Zuordnungen in einer Datei, die dann wiederverwendet werden kann. Sie sollte anfangs 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 sind part1.js und part2.js in Bezug auf verstümmelte Eigenschaftsnamen miteinander konsistent.

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

--mangle-props keep_quoted Namen --mangle-props keep_quoted ( --mangle-props keep_quoted )

Bei Verwendung des in Anführungszeichen gesetzten Eigenschaftsnamens ( o["foo"] ) wird der Eigenschaftsname ( foo ) so reserviert, dass er nicht im gesamten Skript o.foo selbst wenn er in einem nicht in o.foo 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 das --mangle-props debug Eigenschaftsnamen zu o.foo ohne sie vollständig zu verdecken. Beispielsweise würde die Eigenschaft o.foo mit dieser Option zu o._$foo$_ . Dies ermöglicht das o._$foo$_ Eigenschaften einer großen Codebasis während Sie immer noch in der Lage sind, den Code zu debuggen und festzustellen, wo Mangeln die Dinge kaputt macht.

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 --mangle-props debug=XYZ . Dies würde dann o.foo in o._$foo$XYZ_ . Sie können dies jedes Mal ändern, wenn Sie ein Skript kompilieren, um festzustellen, wie eine Eigenschaft entstellt wurde Eine Technik besteht darin, bei jeder Kompilierung eine Zufallszahl zu übergeben, um das Ändern von Mangeln mit verschiedenen Eingaben zu simulieren (z. B. wenn Sie das Eingabeskript mit neuen Eigenschaften aktualisieren) und um Fehler wie das Schreiben von beschädigten 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 voreingestellt. minify() , ermöglicht es die Optionen compress und mangle . Beispiel:

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 mehr als eine JavaScript-Datei gleichzeitig minify 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 toplevel Option:

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 nameCache Option:

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

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 zu `uglify-js@2.x , the 3.x`-API keine Fehler aus. 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 (default false ) - übergeben Sie true , um Kompressorwarnungen in result.warnings . Verwenden Sie den Wert "verbose" für detailliertere Warnungen.

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

  • compress (default {} ) - Übergebe false , um die Komprimierung vollständig zu überspringen. Übergebe ein Objekt, um benutzerdefinierte Komprimierungsoptionen anzugeben.

  • mangle (Standardwert true ) - Übergeben Sie false , um Mangle-Namen zu überspringen, oder übergeben Sie ein Objekt, um Mangle-Optionen anzugeben (siehe unten).

    • mangle.properties (Standardwert false ) - eine Unterkategorie der Mangle-Option. mangle.properties 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 (Standardwert false ) - Übergeben Sie ein Objekt, wenn Sie Optionen für die sourceMap angeben möchten.

  • toplevel (Standardwert false ) toplevel auf true wenn Sie die toplevel von Variablen und Funktionsnamen auf oberster Ebene aktivieren und nicht verwendete Variablen und Funktionen toplevel möchten.

  • nameCache (Standardwert null ) - nameCache ein leeres Objekt {} oder ein zuvor verwendetes nameCache Objekt, wenn Sie nameCache Variablen- und Eigenschaftsnamen in mehreren Aufrufen von minify() . Hinweis: Dies ist eine Lese- / Schreibeigenschaft. minify() wird Lesen Sie den Namen-Cache-Status dieses Objekts und aktualisieren Sie es während der Minimierung, damit es vom Benutzer wiederverwendet oder extern beibehalten werden kann.

  • ie8 (Standardwert false ) - Auf true , um IE8 zu unterstützen.

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

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 result.map nicht in einer Datei gespeichert wird, sondern nur in result.map . Der für sourceMap.url Wert wird nur verwendet, um //# sourceMappingURL=out.js.map in result.code . Der Wert von filename wird nur zum file Dateiattributs (siehe Spezifikation ) in der Quellzuordnungsdatei verwendet.

Sie können die Option sourceMap.url auf "inline" und die sourceMap.url wird an den Code angehängt.

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 sourceMap.content dafür haben, können Sie 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-SourceMap Header verwenden, können Sie sourceMap.url einfach weglassen.

Analyseoptionen

  • bare_returns (Standardwert false ) - unterstützt return obersten Ebene

  • html5_comments (Standardwert true )

  • shebang (Standardwert true ) - unterstützt den #!command als erste Zeile

Optionen komprimieren

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

  • booleans (Standard: true ) - verschiedene Optimierungen für den booleschen Kontext, z. B. !!a ? b : c → a ? b : c

  • collapse_vars (Standard: true ) - Reduzieren Sie nicht konstante Variablen für den einmaligen Gebrauch, sofern die Nebenwirkungen dies zulassen.

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

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

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

  • drop_console (Standard: false ) - drop_console true , um Aufrufe an console.* -Funktionen zu verwerfen. Wenn Sie einen bestimmten Funktionsaufruf wie console.info und / oder Nebenwirkungen von Funktionsargumenten nach dem pure_funcs des Funktionsaufrufs pure_funcs verwenden Sie pure_funcs stattdessen.

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

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

  • expression (Standard: false ) - Übergeben Sie true , um die Abschlusswerte von Terminalanweisungen ohne return beizubehalten, z. B. in Lesezeichen.

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

  • hoist_funs (Standard: false ) - Deklarationen der hoist_funs

  • hoist_props (Standard: true ) - hoist_props 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(op, oq); is umgewandelt f(1, 2); Hinweis: hoist_props funktioniert am besten mit mangle aktiviert, wird die compress Option passes einstellen 2 oder höher und die compress Option toplevel aktiviert.

  • hoist_vars (Standard: false ) - var Deklarationen für hoist_vars (dies ist standardmäßig false 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 zur Funktion mit simple / return Anweisung:

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

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

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

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

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

  • negate_iife (Standard: true ) - negiere "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 mithilfe der Punktnotation neu, z. B. foo["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 die Variable q nicht anderweitig verwendet wird, wird sie von Math.floor(a/b) , der Math.floor(a/b) bleibt jedoch erhalten, ohne zu wissen, was er tut. Sie können pure_funcs: [ 'Math.floor' ] , um pure_funcs: [ 'Math.floor' ] , dass diese Funktion keine Nebenwirkungen hervorruft. In diesem Fall wird die gesamte Anweisung verworfen. Die aktuelle Implementierung pure_funcs Overhead (die Komprimierung ist langsamer). pure_funcs Sie sicher, dass auch Symbole unter pure_funcs sind unter mangle.reserved , um ein mangle.reserved zu vermeiden.

  • pure_getters (Standard: "strict" ) - Wenn Sie dies als true , geht UglifyJS davon aus, dass der Zugriff auf foo.bar (z. B. foo.bar oder foo["bar"] ) keine Nebenwirkungen hat. Geben Sie "strict" an foo.bar nur dann als foo.bar wenn foo sicher nicht wirft, dh nicht null oder undefined .

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

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

  • sequences (Standard: 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.. true dann das Standard - sequences Limit ist 200 Setzen Sie die Option auf false oder 0 , um sie zu deaktivieren. Die kleinste sequences ist 2 Ein sequences von 1 ist groß, um true zu entsprechen, und bedeutet daher 200 In seltenen Fällen führt die Standardsequenzbegrenzung zu sehr langsamen Komprimierungszeiten In diesem Fall wird ein Wert von 20 oder weniger empfohlen.

  • side_effects (Standard: true ) - side_effects false , um potenziell löschende Funktionen zu deaktivieren, die als "pure" markiert sind. Ein Funktionsaufruf wird als "pure" markiert, wenn eine Kommentaranmerkung /*@__PURE__*/ oder /*#__PURE__*/ unmittelbar vor dem steht call. Zum Beispiel: /*@__PURE__*/foo();

  • switches (Standard: true ) - de-Duplikat und nicht erreichbar entfernen switch Zweige

  • toplevel (Standard: false ) - Löscht nicht referenzierte Funktionen ( "funcs" ) und / oder Variablen ( "vars" ) im Bereich der obersten Ebene (standardmäßig false , true , um nicht referenzierte Funktionen und Variablen zu löschen).

  • top_retain (Standard: null ) - Verhindert, dass bestimmte Funktionen und Variablen auf oberster Ebene unused verwendet werden (kann Array, durch Kommas getrennt, RegExp oder Funktion sein. toplevel ).

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

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

  • unsafe_comps (Standard: false ) - komprimiert Ausdrücke wie a <= b unter der Annahme, dass keiner der Operanden NaN .

  • unsafe_Function (Standard: false ) - Function(args, code) Komprimieren und unsafe_Function ( unsafe_Function Function(args, code) wenn sowohl args als auch code Zeichenfolgenliterale sind.

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

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

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

  • unsafe_undefined (Standard: false ) - Ersetzen Sie void 0 wenn eine Variable mit dem Namen undefined im Gültigkeitsbereich vorhanden 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 "keep_assign" ).

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

Mangle Optionen

  • eval (Standardwert false ) - Übergibt true an Mangelnamen, die in Bereichen angezeigt werden, in denen eval oder with verwendet werden.

  • keep_fnames (Standardwert false ) - keep_fnames true um Funktionsnamen nicht zu keep_fnames . Nützlich für Code, der auf Function.prototype.name keep_fnames . Siehe auch: die Komprimierungsoption keep_fnames .

  • reserved (Standard [] ) - Übergibt ein Array von Bezeichnern, die vom Mangeln ausgeschlossen werden sollen. Beispiel: ["foo", "bar"] .

  • toplevel (Standardwert false ) - toplevel true an 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 ) - Verwenden Sie true , 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 keep_quoted Eigenschaftsnamen keep_quoted .

  • 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 reserved Array aufgeführten Eigenschaftsnamen nicht.

Ausgabeoptionen

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

  • ascii_only (Standardwert 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 (Standardwert true ) - Gibt an, ob die Ausgabe tatsächlich verschönert werden soll. Wenn Sie -b wird dies auf true gesetzt. Möglicherweise müssen Sie jedoch -b auch wenn Sie minimierten Code generieren möchten, um zusätzliche Argumente anzugeben Verwenden Sie -b beautify=false , um es zu überschreiben.

  • braces (Standardwert false ) - Fügen Sie immer Klammern in if , for , do , while oder with Anweisungen ein, auch wenn ihr Text eine einzelne Anweisung ist.

  • comments (Standardwert false ) - Übergeben Sie true oder "all" , um alle Kommentare beizubehalten, "some" , um einige Kommentare beizubehalten, eine Zeichenfolge für reguläre Ausdrücke (z. B. /^!/ ) oder eine Funktion.

  • indent_level (Standard 4 )

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

  • inline_script (Standardwert true ) - Escape-HTML-Kommentare und der Schrägstrich bei </script> in Zeichenfolgen

  • keep_quoted_props (Standardwert false ) - Verhindert beim keep_quoted_props Anführungszeichen aus Eigenschaftsnamen in Objektliteralen.

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

  • preamble (Standardwert null ) - Wenn sie übergeben wird, 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 (Standardwert false ) - Übergibt true , um Zeilen beautify funktioniert jedoch nur, wenn beautify auf false .

  • quote_keys (Standardwert false ) - quote_keys true , um alle Schlüssel in quote_keys 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. 0 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 (Standardwert true ) - separate Anweisungen mit Semikolons. Wenn Sie 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 (default true ) - behalte shebang #! in der Präambel (Bash-Skripte)

  • webkit (Standardwert false ) - Aktivieren Sie Problemumgehungen für WebKit-Fehler. PhantomJS-Benutzer sollten diese Option auf 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 nicht Derzeit sehr gut, aber der von UglifyJS generierte Code wird dadurch besser lesbar.

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

Verschiedenes

CAN Pass by You - --comments . Das Beibehalten bestimmter Kommentare Die Ausgabe Standardmäßig im IT-Stil wird JSDoc beibehalten, das die Kommentare "@preserve", "@license" oder "@cc_on" (Bedingte Kompilierung für IEs) enthält. Pass by You CAN. --comments all , um alle Kommentare zu behalten, oder ein gültiger JavaScript-Regexp, um nur Kommentare zu speichern, die diesem Regexp entsprechen. Zum Beispiel --comments /^!/ Kommentare wie /*! 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 es "@preserve" hat, geht der Kommentar verloren, weil die innere Funktion g (die der AST-Knoten ist, 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 compress

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 das new

Conditional compilation

Sie können den --define ( -d ) verwenden, um globale Variablen zu deklarieren, von denen UglifyJS annimmt, dass sie Konstanten sind (sofern nicht im Gültigkeitsbereich definiert). Wenn Sie beispielsweise --define DEBUG=false , wird dies mit der Entfernung von totem Code verbunden UglifyJS verwirft Folgendes aus der Ausgabe:

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

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

UglifyJS warnt davor, dass die Bedingung immer falsch ist und dass nicht erreichbarer Code gelöscht wird. Derzeit gibt es keine Option, nur diese bestimmte Warnung zu deaktivieren. Sie können warnings=false , um alle Warnungen zu deaktivieren.

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.js Datei mit den folgenden build/defines.js :

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 const Deklarationen, wenn Sie sie verwenden. Wenn Sie auf <ES6-Umgebungen abzielen, die unterstützt const , die Verwendung von var mit reduce_vars (standardmäßig aktiviert) sollte ausreichen.

Conditional compilation API

Sie können die bedingte Kompilierung auch über die programmatische API verwenden. Mit dem Unterschied, dass der Eigenschaftsname global_defs und eine 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 Schlüssel global_defs "@" 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

Transversal und Transformation des nativen AST können über TreeWalker bzw. TreeTransformer durchgeführt werden.

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 Option -p spidermonkey spidermonkey teilt UglifyJS mit, dass alle Eingabedateien kein JavaScript sind, sondern der in SpiderMonkey AST in JSON beschriebene JS-Code. 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 Option -p acorn acorn hinzugefügt, die Acorn verwendet, um das gesamte Parsen durchzuführen. Wenn Sie diese Option bestehen, benötigt UglifyJS require("acorn") acorn 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 das Entfernen von Leerzeichen und das Mangeln von Symbolen machen 95% der Größenreduzierung des minimierten Codes für die meisten JavaScript-nicht aufwändigen Codetransformationen aus. Sie können die compress einfach deaktivieren, um Uglify-Builds um das 3- bis 4-fache zu beschleunigen mangle -nur Modus uglify hat vergleichbare minify Geschwindigkeiten und gzip Größen 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 compress , 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 in Quellkarten-Debugging deaktivieren Sie die Uglify- compress und verwenden Sie einfach mangle .

Compiler assumptions

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

  • .toString() und .valueOf() haben keine Nebenwirkungen und wurden für integrierte Objekte nicht überschrieben.
  • undefined , NaN und Infinity wurden nicht extern neu definiert.
  • arguments.callee , arguments.caller und Function.prototype.caller werden nicht verwendet.
  • Der Code erwartet nicht, dass der Inhalt von Function.prototype.toString() oder Error.prototype.stack etwas Besonderes ist.
  • Das Abrufen und Festlegen von Eigenschaften für ein einfaches Objekt verursacht keine anderen Nebenwirkungen (mithilfe von .watch() oder Proxy ).
  • Object.defineProperty() Object properties can be added , entfernt und geändert werden (nicht verhindert mit Object.defineProperty() , Object.defineProperties() , Object.freeze() , Object.preventExtensions() oder Object.seal() ).