terser的压缩大法mangleprops

–mangle-props 真的是一个逆天的功能：

// stuff.js
var o = {
    "foo": 1,
    bar: 3
};
o.foo += o.bar;
console.log(o.foo);

经过压缩后，【命令行：terser ../zpageA.js -o foo.js –mangle-props】变成这样了：

var o={o:1,l:3};o.o+=o.l;console.log(o.o);

尼玛的原本的属性都没有了，好在有其他选项可以控制这个度，比如是否带有引号的属性会保护起来，一起正则匹配：

CLI mangling property names (–mangle-props)
Note: THIS WILL BREAK YOUR CODE. A good rule of thumb is not to use this unless you know exactly what you’re doing and how this works and read this section until the end.

Mangling property names is a separate step, different from variable name mangling. Pass –mangle-props to enable it. The least dangerous way to use this is to use the regex option like so:

terser example.js -c -m –mangle-props regex=/_$/
This will mangle all properties that start with an underscore. So you can use it to mangle internal methods.

By default, it will mangle all properties in the input code with the exception of built in DOM properties and properties in core JavaScript classes, which is what will break your code if you don’t:

Control all the code you’re mangling
Avoid using a module bundler, as they usually will call Terser on each file individually, making it impossible to pass mangled objects between modules.
Avoid calling functions like defineProperty or hasOwnProperty, because they refer to object properties using strings and will break your code if you don’t know what you are doing.
An example:

// 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 all properties (except for JavaScript builtins) (very unsafe):

$ terser example.js -c -m –mangle-props
var x={o:0,_:1,l:function(){return this._+this.o}};x.t=2,x.o=3,console.log(x.l());
Mangle all properties except for reserved properties (still very unsafe):

$ terser example.js -c -m –mangle-props reserved=[foo_,bar_]
var x={o:0,foo_:1,_:function(){return this.foo_+this.o}};x.bar_=2,x.o=3,console.log(x._());
Mangle all properties matching a regex (not as unsafe but still unsafe):

$ terser example.js -c -m –mangle-props regex=/_$/
var x={o:0,_:1,calc:function(){return this._+this.o}};x.l=2,x.o=3,console.log(x.calc());
Combining mangle properties options:

$ terser example.js -c -m –mangle-props regex=/_$/,reserved=[bar_]
var x={o:0,_:1,calc:function(){return this._+this.o}};x.bar_=2,x.o=3,console.log(x.calc());
In order for this to be of any use, we avoid mangling standard JS names by default (–mangle-props builtins to override).

A default exclusion file is provided in tools/domprops.json which should cover most standard JS and DOM properties defined in various browsers. Pass –mangle-props domprops to disable this feature.

A regular expression can be used to define which property names should be mangled. For example, –mangle-props regex=/^_/ will only mangle property names that start with an underscore.

When you compress multiple files using this option, in order for them to work together in the end we need to ensure somehow that one property gets mangled to the same name in all of them. For this, pass –name-cache filename.json and Terser will maintain these mappings in a file which can then be reused. It should be initially empty. Example:

$ rm -f /tmp/cache.json # start fresh
$ terser file1.js file2.js –mangle-props –name-cache /tmp/cache.json -o part1.js
$ terser file3.js file4.js –mangle-props –name-cache /tmp/cache.json -o part2.js
Now, part1.js and part2.js will be consistent with each other in terms of mangled property names.

Using the name cache is not necessary if you compress all your files in a single call to Terser.

Mangling unquoted names (–mangle-props keep_quoted)
Using quoted property name (o[“foo”]) reserves the property name (foo) so that it is not mangled throughout the entire script even when used in an unquoted style (o.foo). Example:

// stuff.js
var o = {

"foo": 1,
bar: 3

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