Geweldige gemeenschapsmodule

UglifyJS 3

UglifyJS is een JavaScript-parser, minifier, compressor en verfraaiingstoolkit.

Opmerking:

  • uglify-js@3heeft een vereenvoudigde API en CLI die niet achterwaarts compatibel is metuglify-js@2 .
  • Documentatie voor UglifyJS- releases kunt u hier2.x vinden .
  • uglify-jsondersteunt alleen JavaScript (ECMAScript 5).
  • Om ECMAScript 2015 of hoger te verkleinen, transpileert u met tools zoals Babel .

Installeren

Zorg er eerst voor dat u de nieuwste versie van node.js hebt geïnstalleerd (mogelijk moet u na deze stap uw computer opnieuw opstarten).

Van NPM voor gebruik als opdrachtregelapp:

1
npm install uglify-js -g

Van NPM voor programmatisch gebruik:

1
npm install uglify-js

Gebruik van de opdrachtregel

1
uglifyjs [input files] [options]

UglifyJS kan meerdere invoerbestanden gebruiken. Het wordt aanbevolen dat u eerst de invoerbestanden doorgeeft en daarna de opties. UglifyJS parseert de invoerbestanden op volgorde en past eventuele compressie-opties toe. De bestanden worden geparseerd in hetzelfde globale bereik, dat wil zeggen een referentie van een bestand naar een variabele/functie die in een ander bestand is gedeclareerd, zal correct worden gematcht.

Als er geen invoerbestand is opgegeven, leest UglifyJS van STDIN.

Als u uw opties vóór de invoerbestanden wilt doorgeven, scheidt u de twee met een dubbel streepje om te voorkomen dat invoerbestanden als optieargumenten worden gebruikt:

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.

Geef --output( -o) op om het uitvoerbestand te declareren. Anders gaat de uitvoer naar STDOUT.

CLI-bronkaartopties

UglifyJS kan een bronkaartbestand genereren, wat zeer handig is voor het debuggen van uw gecomprimeerde JavaScript. Om een ​​bronkaart te krijgen, geeft u door --source-map --output output.js(bronkaart wordt uitgeschreven naar output.js.map).

Toegevoegde opties:

  • --source-map "filename='<NAME>'"om de naam van de bronkaart op te geven.

  • --source-map "root='<URL>'"om de URL door te geven waar de originele bestanden te vinden zijn.

  • --source-map "url='<URL>'"om de URL op te geven waar de bronkaart kan worden gevonden. Anders gaat UglifyJS ervan uit dat HTTP X-SourceMapwordt gebruikt en zal de //# sourceMappingURL=richtlijn worden weggelaten.

Bijvoorbeeld:

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

Het bovenstaande zal comprimeren en verminken file1.jsen file2.js, zal de uitvoer laten vallen in foo.min.jsen de bronkaart in foo.min.js.map. De brontoewijzing zal verwijzen naar http://foo.com/src/js/file1.jsen http://foo.com/src/js/file2.js(in feite zal het vermeld worden http://foo.com/src als de root van de bronkaart, en de originele bestanden als js/file1.jsen js/file2.js).

Composed source map

Wanneer u JS-code comprimeert die is uitgevoerd door een compiler zoals CoffeeScript, zal het toewijzen aan de JS-code niet zo nuttig zijn. In plaats daarvan wilt u teruggaan naar de originele code (dat wil zeggen CoffeeScript). UglifyJS heeft een Ervan uitgaande dat je een mapping hebt van CoffeeScript → gecompileerde JS, kan UglifyJS een map genereren van CoffeeScript → gecomprimeerde JS door elk token in de gecompileerde JS toe te wijzen aan de oorspronkelijke locatie.

Om deze feature pass te gebruiken --source-map "content='/path/to/input/source.map'" of --source-map "content=inline"als de bronkaart inline met de bronnen is opgenomen.

CLI-compressieopties

U moet --compress( -c) doorgeven om de compressor in te schakelen. Optioneel kunt u een door komma's gescheiden lijst met compressieopties doorgeven .

Opties hebben de vorm foo=bar, of gewoon foo(de laatste impliceert een Booleaanse optie die u wilt instellen true; het is in feite een snelkoppeling voor foo=true).

Voorbeeld:

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

CLI-mangelopties

Om de mangler in te schakelen moet u --mangle( -m) doorgeven. De volgende (door komma's gescheiden) opties worden ondersteund:

  • toplevel(standaard false) - vermink namen die zijn gedeclareerd in het bereik op het hoogste niveau.

  • eval(standaard false) - namen verminken die zichtbaar zijn in bereiken waar evalof withworden gebruikt.

Wanneer mangelen is ingeschakeld, maar u wilt voorkomen dat bepaalde namen worden verminkt, kunt u die namen declareren met --mangle reserved- geef een door komma's gescheiden lijst met namen door. Bijvoorbeeld:

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

om te voorkomen dat de require, exportsen $namen worden gewijzigd.

CLI mangelt eigenschapsnamen ( --mangle-props)

Opmerking: DIT ZAL WAARSCHIJNLIJK UW CODE VERBREKEN. Het mangelen van eigenschapsnamen is een aparte stap, anders dan het mangelen van variabelenamen. Geef --mangle-propsdit door om dit in te schakelen. Alle eigenschappen in de invoercode zullen worden verminkt, met uitzondering van de ingebouwde DOM-eigenschappen en eigenschappen in de kern van JavaScript. klassen, bijvoorbeeld:

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

Mangel alle eigenschappen behalve reservedeigenschappen:

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

Mangel alle eigendommen die overeenkomen met een 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());

Opties voor mangeleigenschappen combineren:

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

Om dit van enig nut te laten zijn, vermijden we standaard het verminken van standaard JS-namen ( --mangle-props builtinsom te overschrijven).

Er wordt een standaarduitsluitingsbestand geleverd waarin tools/domprops.jsonde meeste standaard JS- en DOM-eigenschappen moeten worden opgenomen die in verschillende browsers zijn gedefinieerd. Geef dit door --mangle-props dompropsom deze functie uit te schakelen.

Er kan een reguliere expressie worden gebruikt om te definiëren welke eigenschapsnamen moeten worden verminkt. --mangle-props regex=/^_/Er worden bijvoorbeeld alleen eigenschapsnamen verminkt die beginnen met een onderstrepingsteken.

Wanneer u meerdere bestanden comprimeert met deze optie, moeten we er, om ze uiteindelijk te laten samenwerken, op de een of andere manier voor zorgen dat één eigenschap in alle bestanden onder dezelfde naam wordt verminkt. Hiervoor zullen pass --name-cache filename.json en UglifyJS deze toewijzingen bijhouden in een bestand dat vervolgens opnieuw kan worden gebruikt. Het moet in eerste instantie leeg zijn. Voorbeeld:

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

Nu, part1.jsen part2.jszullen consistent met elkaar zijn in termen van verminkte eigendomsnamen.

Het gebruik van de naamcache is niet nodig als u al uw bestanden comprimeert in één enkele aanroep naar UglifyJS.

Niet-geciteerde namen verminken ( --mangle-props keep_quoted)

Als u de eigenschapsnaam tussen aanhalingstekens ( o["foo"]) gebruikt, wordt de eigenschapsnaam ( foo) gereserveerd, zodat deze niet door het hele script wordt verminkt, zelfs niet als deze in een stijl zonder aanhalingstekens wordt gebruikt ( o.foo).

1 2 3 4 5 6 7
// stuff.js var o = { "foo": 1, bar: 3 }; o.foo += o.bar; console.log(o.foo);
1
$ uglifyjs stuff.js --mangle-props keep_quoted -c -m
1
var o={foo:1,o:3};o.foo+=o.o,console.log(o.foo);

Debugging property name mangling

U kunt ook slagen --mangle-props debugom eigenschapsnamen te mangelen zonder ze volledig te verbergen. Met deze optie o.foo zou de eigenschap bijvoorbeeld mangelen o._$foo$_. Dit maakt het mangelen van eigenschappen van een grote codebase mogelijk, terwijl u nog steeds de code kunt debuggen en kunt identificeren waar mangelen dingen kapot maakt.

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

U kunt ook een aangepast achtervoegsel doorgeven met behulp van --mangle-props debug=XYZ. Dit zou dan worden verminkt o.foonaar o._$foo$XYZ_. U kunt dit elke keer dat u een script compileert wijzigen om te identificeren hoe een eigenschap is verminkt. Eén techniek is om bij elke compilatie een willekeurig getal door te geven om te simuleren dat het verminken verandert met verschillende invoer (bijvoorbeeld als u het invoerscript bijwerkt met nieuwe eigenschappen) en om fouten te helpen identificeren, zoals het schrijven van verminkte sleutels naar opslag.

API-referentie

Ervan uitgaande dat installatie via NPM plaatsvindt, kunt u UglifyJS als volgt in uw applicatie laden:

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

Er is één functie op hoog niveau, , die alle minificatiefasenminify(code, options) op een configureerbare manier uitvoert . Standaard worden de opties en ingeschakeld . Voorbeeld: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}

U kunt minifymeer dan één JavaScript-bestand tegelijk gebruiken door een object te gebruiken voor het eerste argument waarbij de sleutels bestandsnamen zijn en de waarden broncode:

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

De topleveloptie:

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

De nameCacheoptie:

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

U kunt de naamcache op de volgende manier in het bestandssysteem bewaren:

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

Een voorbeeld van een combinatie van minify()opties:

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

Waarschuwingen produceren:

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}

Een foutvoorbeeld:

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}

Opmerking: in tegenstelling tot uglify-js@2.x, genereert de 3.xAPI geen fouten. Om een ​​soortgelijk effect te bereiken, zou je het volgende kunnen doen:

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

Verklein opties

  • warnings(standaard false) — doorgeven trueom compressorwaarschuwingen terug te geven in result.warnings. Gebruik de waarde "verbose"voor meer gedetailleerde waarschuwingen.

  • parse(standaard ) — geef een object door als u enkele aanvullende parse-opties{} wilt opgeven .

  • compress(standaard {}) — doorgeven falseom het comprimeren volledig over te slaan. Geef een object door om aangepaste compressieopties op te geven .

  • mangle(standaard true) — doorgeven falseom mangelnamen over te slaan, of een object doorgeven om mangelopties op te geven (zie hieronder).

    • mangle.properties(default false) — een subcategorie van de mangle-optie. Geef een object door om aangepaste mangle-eigenschapsopties op te geven .
  • output(standaard ) — geef een object door als u extra uitvoeroptiesnull wilt opgeven . De standaardwaarden zijn geoptimaliseerd voor de beste compressie.

  • sourceMap(standaard ) - geef een object door als u bronkaartoptiesfalse wilt opgeven .

  • toplevel(standaard false) - stel dit in trueals u het mangelen van variabelen en functienamen op het hoogste niveau wilt inschakelen en ongebruikte variabelen en functies wilt verwijderen.

  • nameCache(standaard null) - geef een leeg object {}of een eerder gebruikt nameCacheobject door als u verminkte namen van variabelen en eigenschappen in de cache wilt opslaan over meerdere aanroepen van minify(). Opmerking: dit is een lees-/schrijfeigenschap. minify()leest de naamcachestatus van dit object en werkt deze bij tijdens de verkleining, zodat deze door de gebruiker kan worden hergebruikt of extern kan worden gehandhaafd.

  • ie8(standaard false) - ingesteld op trueondersteuning van IE8.

  • keep_fnames(standaard: false) - doorgeven trueom het negeren of verminken van functienamen te voorkomen. Handig voor code die afhankelijk is van Function.prototype.name.

Verklein de optiestructuur

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

Om een ​​bronkaart te genereren:

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

Houd er rekening mee dat de bronkaart niet in een bestand wordt opgeslagen, maar alleen wordt geretourneerd in . result.mapDe doorgegeven waarde sourceMap.urlwordt alleen gebruikt om in te stellen . De waarde van wordt alleen gebruikt om het attribuut in te stellen (zie de specificatie ) in het bronkaartbestand.//# sourceMappingURL=out.js.mapresult.codefilenamefile

U kunt de optie sourceMap.urlzo instellen "inline"dat de bronkaart aan de code wordt toegevoegd.

U kunt ook de eigenschap sourceRoot opgeven die moet worden opgenomen in de bronkaart:

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

Als u gecompileerd JavaScript comprimeert en er een bronkaart voor heeft, kunt u het volgende gebruiken 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`

Als u in plaats daarvan de header gebruikt X-SourceMap, kunt u deze gewoon weglaten sourceMap.url.

Parseer opties

  • bare_returns(standaard false) -- ondersteunt returnuitspraken op het hoogste niveau

  • html5_comments(standaard true)

  • shebang(standaard true) - ondersteuning #!commandals eerste regel

Comprimeer opties

  • arguments(standaard: true) -- vervang arguments[index]waar mogelijk door de naam van de functieparameter.

  • booleans(standaard: true) -- verschillende optimalisaties voor bijvoorbeeld de Booleaanse context!!a ? b : c → a ? b : c

  • collapse_vars(standaard: true) -- Niet-constante variabelen voor eenmalig gebruik samenvouwen, afhankelijk van de bijwerkingen.

  • comparisons(standaard: true) -- pas bepaalde optimalisaties toe op binaire knooppunten, bijv !(a <= b) → a > b. pogingen om binaire knooppunten te negeren, bijv a = !b && !c && !d && !e → a=!(b||c||d||e). enz.

  • conditionals(standaard: true) -- pas optimalisaties toe voor if-s en voorwaardelijke expressies

  • dead_code(standaard: true) -- verwijder onbereikbare code

  • drop_console(standaard: false) -- Doorgaan trueom oproepen naar functies te negeren console.*. Als u een specifieke functieaanroep wilt laten vallen, zoals console.infoen/of bijwerkingen van functieargumenten wilt behouden nadat u de functieaanroep hebt laten vallen, gebruik dan pure_funcsin plaats daarvan.

  • drop_debugger(standaard: true) -- verwijder debugger;instructies

  • evaluate(standaard: true) -- poging om constante expressies te evalueren

  • expression(standaard: false) -- Doorgeven trueom voltooiingswaarden van terminalinstructies zonder te behouden return, bijvoorbeeld in bookmarklets.

  • global_defs(standaard: {}) -- zie voorwaardelijke compilatie

  • hoist_funs(standaard: false) -- hijsfunctiedeclaraties

  • hoist_props(standaard: true) -- hijst eigenschappen van constante object- en array-literals naar reguliere variabelen, onderworpen aan een reeks beperkingen. Bijvoorbeeld: var o={p:1, q:2}; f(o.p, o.q);wordt geconverteerd naar f(1, 2);. Opmerking: hoist_props werkt het beste als de optie mangleis ingeschakeld, de compressoptie passesis ingesteld op 2of hoger en de compressoptie toplevelis ingeschakeld.

  • hoist_vars(standaard: false) -- hoist- vardeclaraties (dit is false standaard omdat het de omvang van de uitvoer in het algemeen lijkt te vergroten)

  • if_return(standaard: true) -- optimalisaties voor if/return en if/continu

  • inline(standaard: true) -- inline-aanroepen om te functioneren met simple/ returnstatement:

    • false--hetzelfde als0
    • 0- uitgeschakelde inlining
    • 1-- inline eenvoudige functies
    • 2-- inline-functies met argumenten
    • 3-- inline-functies met argumenten en variabelen
    • true--hetzelfde als3
  • join_vars(standaard: ) -- opeenvolgende instructies truesamenvoegenvar

  • keep_fargs(standaard: true) -- Voorkomt dat de compressor ongebruikte functieargumenten verwijdert. U hebt dit nodig voor code die afhankelijk is van Function.length.

  • keep_fnames(standaard: false) -- Pass trueom te voorkomen dat de compressor functienamen verwijdert. Handig voor code die afhankelijk is van Function.prototype.name. Zie ook: de keep_fnames mangeloptie .

  • keep_infinity(standaard: false) -- Geef dit door trueom te voorkomen Infinitydat het wordt gecomprimeerd naar 1/0, wat prestatieproblemen in Chrome kan veroorzaken.

  • loops(standaard: true) -- optimalisaties voor do, whileen forloops wanneer we de voorwaarde statisch kunnen bepalen.

  • negate_iife(standaard: true) -- negeer "Immediately-Called Function Expressions" waarbij de retourwaarde wordt weggegooid, om de haakjes te vermijden die de codegenerator zou invoegen.

  • passes(standaard: 1) -- Het maximale aantal keren dat compressie moet worden uitgevoerd. In sommige gevallen leidt meer dan één passage tot verder gecomprimeerde code. Houd er rekening mee dat meer passages meer tijd in beslag nemen.

  • properties(standaard: true) -- herschrijf de eigendomstoegang met behulp van bijvoorbeeld de puntnotatiefoo["bar"] → foo.bar

  • pure_funcs(standaard: null) -- U kunt een reeks namen doorgeven en UglifyJS gaat ervan uit dat deze functies geen bijwerkingen veroorzaken. GEVAAR: controleert niet of de naam opnieuw wordt gedefinieerd in de reikwijdte. Een voorbeeld hier, bijvoorbeeld. var q = Math.floor(a/b)Als de variabele qis Als het niet elders wordt gebruikt, zal UglifyJS het laten vallen, maar nog steeds de , behouden Math.floor(a/b), niet wetende wat het doet. Je kunt doorgeven pure_funcs: [ 'Math.floor' ]om te laten weten dat deze functie geen enkel neveneffect zal veroorzaken, in welk geval de hele instructie wordt weggegooid. de huidige implementatie voegt wat overhead toe (de compressie zal langzamer zijn). Zorg ervoor dat de symbolen eronder pure_funcs ook onder staan mangle.reserved​​om verminking te voorkomen.

  • pure_getters(standaard: "strict") -- Als u truehiervoor slaagt, gaat UglifyJS ervan uit dat toegang tot objecteigenschappen (bijv. foo.barof foo["bar"]) geen bijwerkingen heeft. Geef op dat u dit alleen als neveneffectvrij "strict"wilt behandelen als het zeker is dat er geen sprake is van gooien, dat wil zeggen niet of .foo.barfoonullundefined

  • reduce_funcs(standaard: true) -- Hiermee kunnen functies voor eenmalig gebruik worden inline als functie-expressies, indien toegestaan, waardoor verdere optimalisatie mogelijk is. Standaard ingeschakeld. De optie is afhankelijk van de mate waarin deze is reduce_vars ingeschakeld. Sommige code wordt sneller uitgevoerd in de Chrome V8-engine als deze optie is uitgeschakeld. Niet een negatieve invloed hebben op andere grote browsers.

  • reduce_vars(standaard: true) -- Verbeter de optimalisatie van variabelen die zijn toegewezen aan en worden gebruikt als constante waarden.

  • sequences(standaard: true) - voeg opeenvolgende eenvoudige instructies samen met behulp van de komma-operator. Kan worden ingesteld op een positief geheel getal om het maximale aantal opeenvolgende kommareeksen op te geven dat wordt gegenereerd. Als deze optie is ingesteld op, is truede standaardlimiet . Optie instellen naar of uit te schakelen. De kleinste lengte is . Een waarde van wordt gelijkgesteld met en betekent als zodanig . In zeldzame gevallen leidt de standaardreekslimiet tot zeer langzame compressietijden, in welk geval een waarde van of minder wordt aanbevolen.sequences200false0sequences2sequences1true20020

  • side_effects(standaard: true) -- Ga door falseom mogelijk wegvallende functies uit te schakelen die zijn gemarkeerd als 'puur'. Een functieaanroep wordt gemarkeerd als 'puur' als er een commentaarannotatie aanwezig is /*@__PURE__*/of /*#__PURE__*/onmiddellijk aan de aanroep voorafgaat. Bijvoorbeeld:/*@__PURE__*/foo();

  • switches(standaard: true) -- dupliceer en verwijder onbereikbare switchtakken

  • toplevel(standaard: false) - verwijder functies zonder verwijzingen ( "funcs") en/of variabelen ( "vars") in het bereik op het hoogste niveau ( falsestandaard trueom zowel functies als variabelen zonder verwijzingen te verwijderen)

  • top_retain(standaard: null) - voorkom dat specifieke functies en variabelen op het hoogste niveau worden unusedverwijderd (kan een array zijn, door komma's gescheiden, RegExp of function. Implies toplevel)

  • typeofs(standaard: true) -- Transformeert typeof foo == "undefined"naar foo === void 0. Opmerking: het wordt aanbevolen deze waarde in te stellen falsevoor IE10 en eerdere versies vanwege bekende problemen.

  • unsafe(standaard: false) -- "onveilige" transformaties toepassen (bespreking hieronder)

  • unsafe_comps(standaard: false) - expressies comprimeren, zoals a <= baannemen dat geen van de operanden kan zijn (gedwongen tot) NaN.

  • unsafe_Function(standaard: false) -- comprimeren en verminken Function(args, code) wanneer beide argsen codeletterlijke tekenreeksen zijn.

  • unsafe_math(standaard: false) -- optimaliseer numerieke uitdrukkingen zoals 2 * x * 3into 6 * x, wat onnauwkeurige drijvende-kommaresultaten kan opleveren.

  • unsafe_proto(standaard: false) -- optimaliseer expressies zoals Array.prototype.slice.call(a)into[].slice.call(a)

  • unsafe_regexp(standaard: false) -- schakel vervangingen van variabelen door RegExpwaarden op dezelfde manier in alsof het constanten zijn.

  • unsafe_undefined(standaard: false) - vervang deze void 0als er een variabele is genoemd undefinedin het bereik (de naam van de variabele wordt verminkt, meestal teruggebracht tot één teken)

  • unused(standaard: true) -- functies en variabelen zonder referenties verwijderen (eenvoudige toewijzingen van directe variabelen tellen niet als referenties, tenzij ingesteld op "keep_assign")

  • warnings(standaard: false) - waarschuwingen weergeven bij het verwijderen van onbereikbare code of ongebruikte declaraties enz.

Mangel-opties

  • eval(standaard false) -- Doorgeven trueom namen te verminken die zichtbaar zijn in scopes waar evalof withworden gebruikt.

  • keep_fnames(standaard false) -- Doorgeven trueom functienamen niet te verminken. Handig voor code die afhankelijk is van Function.prototype.name. Zie ook: de keep_fnames compressieoptie .

  • reserved(standaard []) -- Geef een reeks ID's door die moeten worden uitgesloten van mangelen. Voorbeeld: ["foo", "bar"].

  • toplevel(standaard false) - Doorgeven trueom namen te verminken die zijn gedeclareerd in het bereik op het hoogste niveau.

Voorbeelden:

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(standaard: false) -- Gebruik dit trueom het verminken van ingebouwde DOM-eigenschappen toe te staan. Het wordt niet aanbevolen om deze instelling te overschrijven.

  • debug(standaard: false) - Namen verminken terwijl de oorspronkelijke naam nog steeds aanwezig is. Geef een lege string door ""om in te schakelen, of een niet-lege string om het debug-achtervoegsel in te stellen.

  • keep_quoted(standaard: false) -- Vermink alleen niet-geciteerde eigenschapsnamen.

  • regex(standaard: null) -- Geef een letterlijke RegExp door om alleen eigenschapsnamen te verminken die overeenkomen met de reguliere expressie.

  • reserved(standaard: []) -- Vermink de namen van eigenschappen die in de array voorkomen niet reserved.

Uitvoeropties

De codegenerator probeert standaard de kortst mogelijke code uit te voeren. Als u een verfraaide uitvoer wilt, geeft u --beautify( -b) door. Optioneel kunt u aanvullende argumenten doorgeven die de code-uitvoer bepalen:

  • ascii_only(standaard false) -- Unicode-tekens in strings en regexps ontsnappen (beïnvloedt richtlijnen waarbij niet-ASCII-tekens ongeldig worden)

  • beautify(default true) -- of de uitvoer daadwerkelijk moet worden verfraaid. Als u doorgeeft, -bwordt dit op true gezet, maar het kan zijn dat u -bzelfs als u verkleinde code wilt genereren, moet doorgaan om aanvullende argumenten op te geven, zodat u deze kunt gebruiken om -b beautify=falsedeze te overschrijven.

  • braces(standaard false) -- plaats altijd accolades in if, for, doof -instructies, zelfs als de hoofdtekst ervan uit één enkele instructie bestaat while.with

  • comments(standaard false) -- geef trueof door "all"om alle opmerkingen te behouden, "some"om enkele opmerkingen, een tekenreeks voor reguliere expressies (bijv. /^!/) of een functie te behouden.

  • indent_level(standaard 4)

  • indent_start(standaard 0) -- laat alle regels voorafgaan door zoveel spaties

  • inline_script(standaard true) -- escape HTML-opmerkingen en de schuine streep bij het voorkomen van </script>in strings

  • keep_quoted_props(standaard false) -- indien ingeschakeld, wordt voorkomen dat aanhalingstekens uit eigenschapsnamen in letterlijke objecten worden verwijderd.

  • max_line_len(standaard false) -- maximale regellengte (voor lelijke code)

  • preamble(standaard null) -- wanneer het wordt doorgegeven, moet het een tekenreeks zijn en wordt het letterlijk aan de uitvoer toegevoegd. De bronkaart wordt aangepast aan deze tekst. Kan worden gebruikt om commentaar in te voegen met bijvoorbeeld licentie-informatie.

  • preserve_line(standaard false) -- doorgeven trueom regels te behouden, maar het werkt alleen als beautifyis ingesteld op false.

  • quote_keys(standaard false) -- doorgeven trueom alle sleutels in letterlijke objecten te citeren

  • quote_style(standaard 0) -- voorkeursstijl voor aanhalingstekens voor tekenreeksen (is ook van invloed op de namen van geciteerde eigenschappen en richtlijnen):

    • 0-- geeft de voorkeur aan dubbele aanhalingstekens, schakelt over naar enkele aanhalingstekens als er meer dubbele aanhalingstekens in de string zelf staan. 0is het beste voor de gzip-grootte.
    • 1-- gebruik altijd enkele aanhalingstekens
    • 2-- gebruik altijd dubbele aanhalingstekens
    • 3-- gebruik altijd de originele aanhalingstekens
  • semicolons(standaard true) -- afzonderlijke instructies met puntkomma's. Als u slaagt, falsegebruiken we waar mogelijk een nieuwe regel in plaats van een puntkomma, wat leidt tot een beter leesbare uitvoer van lelijke code (grootte vóór gzip kan kleiner zijn; grootte na gzip onbeduidend groter).

  • shebang(standaard true) -- behoud shebang #!in preambule (bash-scripts)

  • webkit(standaard false) - schakel oplossingen voor WebKit-bugs in. PhantomJS-gebruikers moeten deze optie instellen op true.

  • width(standaard 80) - wordt alleen van kracht als verfraaiing is ingeschakeld, dit specificeert een (oriëntatieve) lijnbreedte waaraan de verfraaiing zal proberen te gehoorzamen. Het verwijst naar de breedte van de regeltekst (exclusief inspringing). Het werkt niet erg goed momenteel, maar het maakt de door UglifyJS gegenereerde code wel leesbaarder.

  • wrap_iife(standaard false) -- doorgeven trueom onmiddellijk aangeroepen functie-expressies in te pakken. Zie #640 voor meer details.

Gemengd

U kunt doorgaan --commentsom bepaalde opmerkingen in de uitvoer te behouden. Standaard worden opmerkingen in JSDoc-stijl behouden die '@preserve', '@license' of '@cc_on' bevatten (voorwaardelijke compilatie voor IE). U kunt doorgaan --comments allom alle opmerkingen te behouden. commentaren, of een geldige JavaScript-regexp om alleen commentaren te behouden die overeenkomen met deze regexp. --comments /^!/ Opmerkingen zoals /*! Copyright Notice */.

Houd er echter rekening mee dat er situaties kunnen zijn waarin opmerkingen verloren gaan, bijvoorbeeld:

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

Ook al staat er '@preserve' in, het commentaar gaat verloren omdat de interne functie g(dat is het AST-knooppunt waaraan het commentaar is gekoppeld) door de compressor wordt weggegooid omdat er niet naar wordt verwezen.

De veiligste opmerkingen waar auteursrechtinformatie moet worden geplaatst (of andere informatie die in de uitvoer moet worden bewaard) zijn opmerkingen die zijn gekoppeld aan knooppunten op het hoogste niveau.

De unsafe compressoptie

Het maakt een aantal transformaties mogelijk die in bepaalde verzonnen gevallen de codelogica kunnen doorbreken, maar die voor de meeste code prima zouden moeten zijn. U kunt het misschien op uw eigen code proberen, dan wordt de grootte kleiner. Dit is wat er gebeurt als deze vlag is ingeschakeld:

  • new Array(1, 2, 3)of Array(1, 2, 3)[ 1, 2, 3 ]
  • new Object(){}
  • String(exp)of exp.toString()"" + exp
  • new Object/RegExp/Function/Error/Array (...)→ we gooien de wegnew

Conditional compilation

U kunt de schakelaar --define( -d) gebruiken om globale variabelen te declareren waarvan UglifyJS aanneemt dat het constanten zijn (tenzij gedefinieerd in de reikwijdte). Als u bijvoorbeeld slaagt --define DEBUG=false, zal UglifyJS, in combinatie met het verwijderen van dode code, het volgende uit de uitvoer verwijderen:

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

U kunt geneste constanten opgeven in de vorm van --define env.DEBUG=false.

UglifyJS zal waarschuwen dat de voorwaarde altijd onwaar is en dat onbereikbare code wordt verwijderd; voorlopig is er geen optie om alleen deze specifieke waarschuwing uit te schakelen, u kunt doorgaan om alle waarschuwingen warnings=falseuit te schakelen .

Een andere manier om dat te doen is door uw globale waarden als constanten in een apart bestand te declareren en deze in de build op te nemen. U kunt bijvoorbeeld een build/defines.jsbestand hebben met het volgende:

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

en bouw je code als volgt:

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

UglifyJS zal de constanten opmerken en, omdat ze niet kunnen worden gewijzigd, zal het verwijzingen ernaar evalueren naar de waarde zelf en onbereikbare code verwijderen zoals gewoonlijk. De build zal de constdeclaraties bevatten als u ze gebruikt. Als u zich richt op < ES6-omgevingen die dat wel doen niet ondersteunen const, zou het gebruik van varwith reduce_vars(standaard ingeschakeld) moeten volstaan.

Conditional compilation API

U kunt ook gebruik maken van voorwaardelijke compilatie via de programmatische API, met dit verschil dat de eigenschapsnaam global_defseen ​​compressoreigenschap is en is:

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

Om een ​​ID te vervangen door een willekeurige niet-constante expressie is het noodzakelijk om de global_defssleutel vooraf te laten gaan met "@"om UglifyJS de opdracht te geven de waarde als een expressie te ontleden:

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

Anders zou het worden vervangen als letterlijke tekenreeks:

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

Met behulp van native Uglify AST metminify()

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 en transformatie van de natieve AST kunnen respectievelijk worden uitgevoerd via TreeWalkeren TreeTransformer .

ESTree / SpiderMonkey AST

UglifyJS heeft zijn eigen abstracte syntaxisboomindeling; om praktische redenen kunnen we niet eenvoudig overstappen op het intern gebruik van de SpiderMonkey AST. UglifyJS heeft nu echter een converter die een SpiderMonkey AST kan importeren.

Acorn is bijvoorbeeld een supersnelle parser die een SpiderMonkey AST produceert. Het heeft een klein CLI-hulpprogramma dat één bestand parseert en de AST in JSON op de standaarduitvoer dumpt. Om UglifyJS te gebruiken om dat te mangelen en te comprimeren:

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

De -p spidermonkeyoptie vertelt UglifyJS dat alle invoerbestanden geen JavaScript zijn, maar JS-code beschreven in SpiderMonkey AST in JSON. Daarom gebruiken we in dit geval niet onze eigen parser, maar transformeren we die AST gewoon in onze interne AST.

Use Acorn for parsing

Voor de lol heb ik de -p acornoptie toegevoegd die Acorn gebruikt om al het parseren uit te voeren. Als je deze optie doorgeeft, zal UglifyJS dat doen require("acorn").

Acorn is erg snel (bijvoorbeeld 250 ms in plaats van 380 ms bij sommige 650K-code), maar het converteren van de SpiderMonkey-boom die Acorn produceert duurt nog eens 150 ms, dus in totaal is het iets meer dan alleen het gebruik van de eigen parser van UglifyJS.

Uglify Fast Minify Mode

Het is niet zo bekend, maar het verwijderen van witruimte en het mangelen van symbolen is verantwoordelijk voor 95% van de verkleining van de verkleinde code voor de meeste JavaScript - geen uitgebreide codetransformaties. Je kunt dit eenvoudigweg uitschakelen om compressUglify-builds drie tot vier keer te versnellen mangle. enige modus Uglify heeft vergelijkbare minify-snelheden en gzip-groottes als butternut:

d3.js verkleinen gzip-grootte tijd verkorten (seconden)
origineel 451.131 108.733 -
uglify-js@3.0.24 mangle=false, comprimeren=false 316.600 85.245 0,70
uglify-js@3.0.24 mangle=true, comprimeren=false 220.216 72.730 1.13
pompoen@0.4.6 217.568 72.738 1.41
uglify-js@3.0.24 mangle=true, comprimeren=true 212.511 71.560 3.36
babili@0.1.4 210.713 72.140 12.64

Om de snelle verkleiningsmodus vanuit de CLI in te schakelen, gebruikt u:

1
uglifyjs file.js -m

Om de snelle verkleiningsmodus met de API in te schakelen:

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

Bronkaarten en foutopsporing

Het is bekend dat verschillende compresstransformaties die code vereenvoudigen, herschikken, inline weergeven en verwijderen een negatief effect hebben op het opsporen van fouten met bronkaarten. Dit wordt verwacht omdat code wordt geoptimaliseerd en toewijzingen vaak eenvoudigweg niet mogelijk zijn omdat bepaalde code niet meer bestaat. Voor de hoogste betrouwbaarheid in de broncode kaartfoutopsporing schakel de Uglify- compressoptie uit en gebruik gewoon mangle.

Compiler assumptions

Om betere optimalisaties mogelijk te maken, maakt de compiler verschillende aannames:

  • .toString()en .valueOf()hebben geen bijwerkingen, en voor ingebouwde objecten zijn ze niet overschreven.
  • undefined, NaNen Infinityzijn niet extern opnieuw gedefinieerd.
  • arguments.calleeen arguments.callerworden Function.prototype.callerniet gebruikt.
  • De code verwacht niet dat de inhoud van Function.prototype.toString()iets Error.prototype.stackbijzonders is.
  • Het verkrijgen en instellen van eigenschappen op een gewoon object veroorzaakt geen andere bijwerkingen (het gebruik van .watch()of Proxy).
  • Objecteigenschappen kunnen worden toegevoegd, verwijderd en gewijzigd (niet voorkomen met , Object.defineProperty(), Object.defineProperties()of ) .Object.freeze()Object.preventExtensions()Object.seal()