UglifyJS 3
UglifyJS is een JavaScript-parser, minifier, compressor en verfraaiingstoolkit.
Opmerking:
uglify-js@3
heeft een vereenvoudigde API en CLI die niet achterwaarts compatibel is metuglify-js@2
.- Documentatie voor UglifyJS- releases kunt u hier
2.x
vinden . uglify-js
ondersteunt 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:
1npm install uglify-js -g
Van NPM voor programmatisch gebruik:
1npm install uglify-js
Gebruik van de opdrachtregel
1uglifyjs [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:
1uglifyjs --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 HTTPX-SourceMap
wordt gebruikt en zal de//# sourceMappingURL=
richtlijn worden weggelaten.
Bijvoorbeeld:
1
2
3uglifyjs 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.js
en file2.js
, zal de uitvoer laten vallen in foo.min.js
en de bronkaart in foo.min.js.map
. De brontoewijzing zal verwijzen naar http://foo.com/src/js/file1.js
en
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.js
en
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:
1uglifyjs 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
(standaardfalse
) - vermink namen die zijn gedeclareerd in het bereik op het hoogste niveau.eval
(standaardfalse
) - namen verminken die zichtbaar zijn in bereiken waareval
ofwith
worden 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:
1uglifyjs ... -m reserved=['$','require','exports']
om te voorkomen dat de require
, exports
en $
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-props
dit 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
1var x={o:0,_:1,l:function(){return this._+this.o}};x.t=2,x.o=3,console.log(x.l());
Mangel alle eigenschappen behalve reserved
eigenschappen:
1$ uglifyjs example.js -c -m --mangle-props reserved=[foo_,bar_]
1var 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=/_$/
1var 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_]
1var 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 builtins
om te overschrijven).
Er wordt een standaarduitsluitingsbestand geleverd waarin tools/domprops.json
de meeste standaard JS- en DOM-eigenschappen moeten worden opgenomen die in verschillende browsers zijn gedefinieerd. Geef dit door
--mangle-props domprops
om 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.js
en part2.js
zullen 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
1var o={foo:1,o:3};o.foo+=o.o,console.log(o.foo);
Debugging property name mangling
U kunt ook slagen --mangle-props debug
om 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
1var 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.foo
naar 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:
1var 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()
compress
mangle
1
2
3
4var 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 minify
meer 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
7var 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 toplevel
optie:
1
2
3
4
5
6
7
8var 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 nameCache
optie:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16var 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
16var 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
21var 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
6var 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
3var 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.x
API geen fouten. Om een soortgelijk effect te bereiken, zou je het volgende kunnen doen:
1
2var result = UglifyJS.minify(code, options);
if (result.error) throw result.error;
Verklein opties
warnings
(standaardfalse
) — doorgeventrue
om compressorwaarschuwingen terug te geven inresult.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{}
) — doorgevenfalse
om het comprimeren volledig over te slaan. Geef een object door om aangepaste compressieopties op te geven .mangle
(standaardtrue
) — doorgevenfalse
om mangelnamen over te slaan, of een object doorgeven om mangelopties op te geven (zie hieronder).mangle.properties
(defaultfalse
) — 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
(standaardfalse
) - stel dit intrue
als u het mangelen van variabelen en functienamen op het hoogste niveau wilt inschakelen en ongebruikte variabelen en functies wilt verwijderen.nameCache
(standaardnull
) - geef een leeg object{}
of een eerder gebruiktnameCache
object door als u verminkte namen van variabelen en eigenschappen in de cache wilt opslaan over meerdere aanroepen vanminify()
. 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
(standaardfalse
) - ingesteld optrue
ondersteuning van IE8.keep_fnames
(standaard:false
) - doorgeventrue
om het negeren of verminken van functienamen te voorkomen. Handig voor code die afhankelijk is vanFunction.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
8var 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.map
De doorgegeven waarde sourceMap.url
wordt 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.map
result.code
filename
file
U kunt de optie sourceMap.url
zo 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
6var 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
7var 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
(standaardfalse
) -- ondersteuntreturn
uitspraken op het hoogste niveauhtml5_comments
(standaardtrue
)shebang
(standaardtrue
) - ondersteuning#!command
als eerste regel
Comprimeer opties
arguments
(standaard:true
) -- vervangarguments[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, bijva = !b && !c && !d && !e → a=!(b||c||d||e)
. enz.conditionals
(standaard:true
) -- pas optimalisaties toe voorif
-s en voorwaardelijke expressiesdead_code
(standaard:true
) -- verwijder onbereikbare codedrop_console
(standaard:false
) -- Doorgaantrue
om oproepen naar functies te negerenconsole.*
. Als u een specifieke functieaanroep wilt laten vallen, zoalsconsole.info
en/of bijwerkingen van functieargumenten wilt behouden nadat u de functieaanroep hebt laten vallen, gebruik danpure_funcs
in plaats daarvan.drop_debugger
(standaard:true
) -- verwijderdebugger;
instructiesevaluate
(standaard:true
) -- poging om constante expressies te evaluerenexpression
(standaard:false
) -- Doorgeventrue
om voltooiingswaarden van terminalinstructies zonder te behoudenreturn
, bijvoorbeeld in bookmarklets.global_defs
(standaard:{}
) -- zie voorwaardelijke compilatiehoist_funs
(standaard:false
) -- hijsfunctiedeclaratieshoist_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 naarf(1, 2);
. Opmerking:hoist_props
werkt het beste als de optiemangle
is ingeschakeld, decompress
optiepasses
is ingesteld op2
of hoger en decompress
optietoplevel
is ingeschakeld.hoist_vars
(standaard:false
) -- hoist-var
declaraties (dit isfalse
standaard omdat het de omvang van de uitvoer in het algemeen lijkt te vergroten)if_return
(standaard:true
) -- optimalisaties voor if/return en if/continuinline
(standaard:true
) -- inline-aanroepen om te functioneren met simple/return
statement:false
--hetzelfde als0
0
- uitgeschakelde inlining1
-- inline eenvoudige functies2
-- inline-functies met argumenten3
-- inline-functies met argumenten en variabelentrue
--hetzelfde als3
join_vars
(standaard: ) -- opeenvolgende instructiestrue
samenvoegenvar
keep_fargs
(standaard:true
) -- Voorkomt dat de compressor ongebruikte functieargumenten verwijdert. U hebt dit nodig voor code die afhankelijk is vanFunction.length
.keep_fnames
(standaard:false
) -- Passtrue
om te voorkomen dat de compressor functienamen verwijdert. Handig voor code die afhankelijk is vanFunction.prototype.name
. Zie ook: dekeep_fnames
mangeloptie .keep_infinity
(standaard:false
) -- Geef dit doortrue
om te voorkomenInfinity
dat het wordt gecomprimeerd naar1/0
, wat prestatieproblemen in Chrome kan veroorzaken.loops
(standaard:true
) -- optimalisaties voordo
,while
enfor
loops 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 variabeleq
is Als het niet elders wordt gebruikt, zal UglifyJS het laten vallen, maar nog steeds de , behoudenMath.floor(a/b)
, niet wetende wat het doet. Je kunt doorgevenpure_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 eronderpure_funcs
ook onder staanmangle.reserved
om verminking te voorkomen.pure_getters
(standaard:"strict"
) -- Als utrue
hiervoor slaagt, gaat UglifyJS ervan uit dat toegang tot objecteigenschappen (bijv.foo.bar
offoo["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.bar
foo
null
undefined
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 isreduce_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, istrue
de 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.sequences
200
false
0
sequences
2
sequences
1
true
200
20
side_effects
(standaard:true
) -- Ga doorfalse
om 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 onbereikbareswitch
takkentoplevel
(standaard:false
) - verwijder functies zonder verwijzingen ("funcs"
) en/of variabelen ("vars"
) in het bereik op het hoogste niveau (false
standaardtrue
om zowel functies als variabelen zonder verwijzingen te verwijderen)top_retain
(standaard:null
) - voorkom dat specifieke functies en variabelen op het hoogste niveau wordenunused
verwijderd (kan een array zijn, door komma's gescheiden, RegExp of function. Impliestoplevel
)typeofs
(standaard:true
) -- Transformeerttypeof foo == "undefined"
naarfoo === void 0
. Opmerking: het wordt aanbevolen deze waarde in te stellenfalse
voor IE10 en eerdere versies vanwege bekende problemen.unsafe
(standaard:false
) -- "onveilige" transformaties toepassen (bespreking hieronder)unsafe_comps
(standaard:false
) - expressies comprimeren, zoalsa <= b
aannemen dat geen van de operanden kan zijn (gedwongen tot)NaN
.unsafe_Function
(standaard:false
) -- comprimeren en verminkenFunction(args, code)
wanneer beideargs
encode
letterlijke tekenreeksen zijn.unsafe_math
(standaard:false
) -- optimaliseer numerieke uitdrukkingen zoals2 * x * 3
into6 * x
, wat onnauwkeurige drijvende-kommaresultaten kan opleveren.unsafe_proto
(standaard:false
) -- optimaliseer expressies zoalsArray.prototype.slice.call(a)
into[].slice.call(a)
unsafe_regexp
(standaard:false
) -- schakel vervangingen van variabelen doorRegExp
waarden op dezelfde manier in alsof het constanten zijn.unsafe_undefined
(standaard:false
) - vervang dezevoid 0
als er een variabele is genoemdundefined
in 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
(standaardfalse
) -- Doorgeventrue
om namen te verminken die zichtbaar zijn in scopes waareval
ofwith
worden gebruikt.keep_fnames
(standaardfalse
) -- Doorgeventrue
om functienamen niet te verminken. Handig voor code die afhankelijk is vanFunction.prototype.name
. Zie ook: dekeep_fnames
compressieoptie .reserved
(standaard[]
) -- Geef een reeks ID's door die moeten worden uitgesloten van mangelen. Voorbeeld:["foo", "bar"]
.toplevel
(standaardfalse
) - Doorgeventrue
om 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
10var 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 dittrue
om 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 nietreserved
.
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
(standaardfalse
) -- Unicode-tekens in strings en regexps ontsnappen (beïnvloedt richtlijnen waarbij niet-ASCII-tekens ongeldig worden)beautify
(defaulttrue
) -- of de uitvoer daadwerkelijk moet worden verfraaid. Als u doorgeeft,-b
wordt dit op true gezet, maar het kan zijn dat u-b
zelfs als u verkleinde code wilt genereren, moet doorgaan om aanvullende argumenten op te geven, zodat u deze kunt gebruiken om-b beautify=false
deze te overschrijven.braces
(standaardfalse
) -- plaats altijd accolades inif
,for
,do
of -instructies, zelfs als de hoofdtekst ervan uit één enkele instructie bestaatwhile
.with
comments
(standaardfalse
) -- geeftrue
of door"all"
om alle opmerkingen te behouden,"some"
om enkele opmerkingen, een tekenreeks voor reguliere expressies (bijv./^!/
) of een functie te behouden.indent_level
(standaard4
)indent_start
(standaard0
) -- laat alle regels voorafgaan door zoveel spatiesinline_script
(standaardtrue
) -- escape HTML-opmerkingen en de schuine streep bij het voorkomen van</script>
in stringskeep_quoted_props
(standaardfalse
) -- indien ingeschakeld, wordt voorkomen dat aanhalingstekens uit eigenschapsnamen in letterlijke objecten worden verwijderd.max_line_len
(standaardfalse
) -- maximale regellengte (voor lelijke code)preamble
(standaardnull
) -- 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
(standaardfalse
) -- doorgeventrue
om regels te behouden, maar het werkt alleen alsbeautify
is ingesteld opfalse
.quote_keys
(standaardfalse
) -- doorgeventrue
om alle sleutels in letterlijke objecten te citerenquote_style
(standaard0
) -- 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.0
is het beste voor de gzip-grootte.1
-- gebruik altijd enkele aanhalingstekens2
-- gebruik altijd dubbele aanhalingstekens3
-- gebruik altijd de originele aanhalingstekens
semicolons
(standaardtrue
) -- afzonderlijke instructies met puntkomma's. Als u slaagt,false
gebruiken 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
(standaardtrue
) -- behoud shebang#!
in preambule (bash-scripts)webkit
(standaardfalse
) - schakel oplossingen voor WebKit-bugs in. PhantomJS-gebruikers moeten deze optie instellen optrue
.width
(standaard80
) - 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
(standaardfalse
) -- doorgeventrue
om onmiddellijk aangeroepen functie-expressies in te pakken. Zie #640 voor meer details.
Gemengd
Keeping copyright notices or other comments
U kunt doorgaan --comments
om 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 all
om 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
7function 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
compress
optie
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)
ofArray(1, 2, 3)
→[ 1, 2, 3 ]
new Object()
→{}
String(exp)
ofexp.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
3if (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=false
uit 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.js
bestand hebben met het volgende:
1
2
3var DEBUG = false;
var PRODUCTION = true;
// etc.
en bouw je code als volgt:
1uglifyjs 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 const
declaraties bevatten als u ze gebruikt. Als u zich richt op < ES6-omgevingen die dat wel doen niet ondersteunen const
, zou het gebruik van var
with 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_defs
een compressoreigenschap is en is:
1
2
3
4
5
6
7
8var 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_defs
sleutel 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
8UglifyJS.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
8UglifyJS.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
TreeWalker
en
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:
1acorn file.js | uglifyjs -p spidermonkey -m -c
De -p spidermonkey
optie 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 acorn
optie 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 compress
Uglify-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:
1uglifyjs file.js -m
Om de snelle verkleiningsmodus met de API in te schakelen:
1UglifyJS.minify(code, { compress: false, mangle: true });
Bronkaarten en foutopsporing
Het is bekend dat verschillende compress
transformaties 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- compress
optie 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
,NaN
enInfinity
zijn niet extern opnieuw gedefinieerd.arguments.callee
enarguments.caller
wordenFunction.prototype.caller
niet gebruikt.- De code verwacht niet dat de inhoud van
Function.prototype.toString()
ietsError.prototype.stack
bijzonders is. - Het verkrijgen en instellen van eigenschappen op een gewoon object veroorzaakt geen andere bijwerkingen (het gebruik van
.watch()
ofProxy
). - Objecteigenschappen kunnen worden toegevoegd, verwijderd en gewijzigd (niet voorkomen met
,
Object.defineProperty()
,Object.defineProperties()
of ) .Object.freeze()
Object.preventExtensions()
Object.seal()