JavaScript解析器,压缩器和美化工具包

时间:2018-08-03作者:klpeng分类:IT综合浏览:801评论:0

适用于ES6 +的JavaScript解析器,压缩器和美化工具包.

 

写在前面

适用于ES6 +的JavaScript解析器,压缩器和美化工具包.

uglify-es与API / CLI兼容uglify-js@3.

uglify-es不向后兼容uglify-js@2.

下载安装

首先确保已安装最新版本的node.js (您可能需要在此步骤后重新启动计算机)

从NPM用作命令行应用程序:

npm install uglify-es -g

 

命令行用法

uglifyjs [input files] [options]

UglifyJS可以获取多个输入文件。建议您先传递输入文件,然后传递选项。UglifyJS将按顺序解析输入文件并应用任何压缩选项。这些文件在同一个全局范围内进行解析,即从文件到另一个文件中声明的某个变量/函数的引用将被正确匹配。

如果未指定输入文件,则UglifyJS将从STDIN读取。

如果您希望在输入文件之前传递选项,请使用双短划线将两者分开以防止输入文件用作选项参数:

uglifyjs --compress --mangle -- input.js

命令行选项

  -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.

    --ecma <version>            Specify ECMAScript release: 5, 6, 7 or 8.

    --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-classnames           Do not mangle/drop class names.

    --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.

    --safari10                  Support non-standard Safari 10/11.

                                Equivalent to setting `safari10: true` in `minify()`

                                for `mangle` and `output` options.

                                By default `uglify-es` will not work around

                                Safari 10/11 bugs.

    --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)以声明输出文件。否则输出转到STDOUT。

CLI源映射选项

UglifyJS可以生成源映射文件,这对于调试压缩的JavaScript非常有用。要获取源地图,请传递 --source-map --output output.js(源地图将被写出 output.js.map)。

其他选项:

  •  

--source-map "filename='<NAME>'" 指定源映射的名称。

  •  
  •  

--source-map "root='<URL>'" 传递可以找到原始文件的URL。

  •  
  •  

--source-map "url='<URL>'"指定可以找到源映射的URL。否则UglifyJS假定X-SourceMap正在使用HTTP 并将省略该 //# sourceMappingURL=指令。

  •  

例如:

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

上述将压缩和裂伤file1.jsfile2.js,将下降的输出foo.min.js,并在源映射foo.min.js.map。源映射将引用http://foo.com/src/js/file1.js和 http://foo.com/src/js/file2.js(实际上它将http://foo.com/src 列为源映射根,并将原始文件列为js/file1.js和 js/file2.js)。

组合源图

当您压缩由编译器(如CoffeeScript)输出的JS代码时,映射到JS代码将不会太有用。相反,您想要映射回原始代码(即CoffeeScript)。UglifyJS可以选择输入源地图。假设您有来自CoffeeScript→已编译JS的映射,UglifyJS可以通过将已编译JS中的每个标记映射到其原始位置,从CoffeeScript→压缩JS生成映射。

要使用此功能传递,--source-map "content='/path/to/input/source.map'" 或者--source-map "content=inline"源源地图是否与源内联。

CLI压缩选项

您需要传递--compress-c)以启用压缩器。您可以选择传递逗号分隔的压缩选项列表。

选项在表单中foo=bar,或者只是foo(后者意味着您要设置的布尔选项true;它实际上是一个快捷方式foo=true)。

例:

uglifyjs file.js -c toplevel,sequences=false

CLI mangle选项

要启用mangler,您需要传递--mangle-m)。支持以下(逗号分隔)选项:

  •  

toplevel(默认false) - 在顶级范围内声明的mangle名称。

  •  
  •  

eval(默认false) - 在使用evalwith使用的范围内可见的mangle名称。

  •  

启用修改但是您希望阻止某些名称被修改时,您可以使用--mangle reserved- 通过逗号分隔的名称列表来声明这些名称。例如:

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

阻止requireexports$从名字是改了。

CLI修改属性名称(--mangle-props

注意:这可能会破坏您的代码。Mangling属性名称是一个单独的步骤,与变量名称修改不同。通过 --mangle-props启用它。它将破坏输入代码中的所有属性,但核心JavaScript类中的内置DOM属性和属性除外。例如:

// example.jsvar x = {

    baz_: 0,

    foo_: 1,

    calc: function() {

        return this.foo_ + this.baz_;

    }

};x.bar_ = 2;

x["baz_"] = 3;console.log(x.calc());

对所有属性进行管理(JavaScript除外builtins):

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

对属性以外的所有属性进行管理reserved

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

切换所有匹配的属性regex

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

结合mangle属性选项:

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

为了使其具有任何用途,我们默认避免修改标准JS名称(--mangle-props builtins覆盖)。

提供了一个默认的排除文件,tools/domprops.json其中应包含在各种浏览器中定义的大多数标准JS和DOM属性。传递 --mangle-props domprops以禁用此功能。

正则表达式可用于定义应修剪哪些属性名称。例如,--mangle-props regex=/^_/只会破坏以下划线开头的属性名称。

当您使用此选项压缩多个文件时,为了使它们最终一起工作,我们需要确保某个属性在所有属性中被破坏为相同的名称。为此,pass --name-cache filename.json 和UglifyJS将这些映射保存在一个文件中,然后可以重复使用。它应该是最初为空的。例:

$ RM -f /tmp/cache.json   #重新开始 

$ uglifyjs file1.js file2.js --mangle道具--name缓存/tmp/cache.json -o part1.js

$ uglifyjs file3.js file4.js --mangle-props --name-cache /tmp/cache.json -o part2.js

现在,part1.js并且part2.js将在损坏的属性名称方面相互一致。

如果您在一次调用UglifyJS中压缩所有文件,则无需使用名称缓存。

Mancling unquoted names(--mangle-props keep_quoted

使用带引号的属性name(o["foo"])保留属性name(foo),这样即使在非引用样式(o.foo)中使用它也不会在整个脚本中被破坏。例:

// stuff.jsvar o = {

    "foo": 1,

    bar: 3

};o.foo += o.bar;console.log(o.foo);

$ uglifyjs stuff.js --mangle-props keep_quoted -c -m

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

调试属性名称mangling

您也可以传递--mangle-props debug以破坏属性名称而不会完全遮盖它们。例如,该属性o.foo 将o._$foo$_使用此选项进行修改。这允许对大型代码库进行属性修改,同时仍然能够调试代码并识别破坏事件的位置。

$ uglifyjs stuff.js --mangle-props debug -c -m

var o={_$foo$_:1,_$bar$_:3};o._$foo$_+=o._$bar$_,console.log(o._$foo$_);

您也可以使用传递自定义后缀--mangle-props debug=XYZ。那么这将裂伤o.fooo._$foo$XYZ_。每次编译脚本时都可以更改此项,以确定属性是如何被破坏的。一种技术是在每次编译时传递一个随机数,以模拟使用不同输入更改的修改(例如,当您使用新属性更新输入脚本时),并帮助识别错误,例如将损坏的密钥写入存储。

API参考

假设通过NPM安装,您可以在您的应用程序中加载UglifyJS,如下所示:

var UglifyJS =  require“ uglify-es ”);

有一个高级功能,minify(code, options)它将以可配置的方式执行所有缩小阶段。默认情况下minify()将启用选项compressmangle。例:

var code = "function add(first, second) { return first + second; }";var result = UglifyJS.minify(code);console.log(result.error); // runtime error, or `undefined` if no errorconsole.log(result.code);  // minified output: function add(n,d){return n+d}

minify通过使用第一个参数的对象,一次可以有多个JavaScript文件,其中键是文件名,值是源代码:

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

toplevel选项:

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

nameCache选项:

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

 

您可以通过以下方式将名称缓存持久保存到文件系统:

 

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

 

minify()选项组合的示例:

 

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

 

发出警告:

 

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 caseconsole.log(result.warnings); // [ 'Dropping unused variable u [0:1,18]' ]console.log(result.code);     // function f(){return 5}

 

一个错误示例:

 

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}

 

注意:与API 不同uglify-js@2.x3.xAPI不会抛出错误。为了达到类似的效果,可以执行以下操作:

 

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

 

缩小选项

  •  

ecma(默认undefined) -通过5678重写parse, compressoutput选项。

  •  
  •  

warnings(默认false) - 传递true以返回压缩机警告result.warnings。使用该值"verbose"可获得更详细的警告。

  •  
  •  

parse(默认{}) - 如果要指定一些其他解析选项,则传递对象。

  •  
  •  

compress(默认{}) - 传递false以完全跳过压缩。传递对象以指定自定义压缩选项

  •  
  •  

mangle(默认true) - 传递false以跳过重整名称,或传递一个对象来指定mangle选项(见下文)。

    • mangle.properties(默认false) - mangle选项的子类别。传递对象以指定自定义mangle属性选项
  •  

output(默认null) - 如果要指定其他输出选项,则传递对象。默认值针对最佳压缩进行了优化。

  •  
  •  

sourceMap(默认false) - 如果要指定源映射选项,则传递对象 。

  •  
  •  

toplevel(默认false) - true如果要启用顶级变量和函数名称修改并删除未使用的变量和函数,则设置为。

  •  
  •  

nameCache(默认null) - 如果您希望跨多个调用缓存损坏的变量和属性名称,则传递一个空对象{}或以前使用过的nameCache对象minify()。注意:这是一个读/写属性。minify()将读取此对象的名称缓存状态,并在缩小期间更新它,以便用户可以重复使用或外部持久化。

  •  
  •  

ie8(默认false) - 设置true为支持IE8。

  •  
  •  

keep_classnames(默认值:) undefined- 传递true以防止丢弃或破坏类名。

  •  
  •  

keep_fnames(默认值:) false- 传递true以防止丢弃或损坏函数名称。对于依赖的代码很有用Function.prototype.name。如果顶级minify选项keep_classnamesundefined,它将覆盖顶级minify选项的值keep_fnames

  •  
  •  

safari10(默认:) - 在循环范围界定和false传递true解决Safari 10/11错误await。见safari10在选择mangle 和output了解详细信息。

  •  

缩小选项结构

{

    parse  {

         // parse options 

    },

    compress  {

         // compress options 

    },

    mangle  {

         // mangle options 

        properties  {

             // mangle property options 

        }

    },

    output  {

         // output options 

    },

    sourceMap  {

         / / source map options 

    },

    ecma  5//指定以下之一:5,6,7或8 

    keep_classnames  false

    keep_fnames  false

    ie8  false

    nameCache  null//或指定名称缓存对象 

    safari10  false

    toplevel  false

    warnings  false

}

源地图选项

要生成源映射:

 

var result = UglifyJS.minify({"file1.js": "var a = function() {};"}, {

    sourceMap: {

        filename: "out.js",

        url: "out.js.map"

    }

});console.log(result.code); // minified outputconsole.log(result.map);  // source map

 

请注意,源映射不会保存在文件中,而是刚刚返回 result.map。通过了该值sourceMap.url仅用于设置 //# sourceMappingURL=out.js.mapresult.code。值 filename仅用于设置源映射文件中的file属性(请参阅规范)。

您可以将选项设置sourceMap.url为be "inline",源地图将附加到代码中。

您还可以指定要包含在源映射中的sourceRoot属性:

var result =  UglifyJS。minify({ “ file1.js ” “ var a = function(){}; ” },{

    sourceMap  {

        root  “ http://example.com/src ”

        url  “ out.js.map ” 

    }

});

如果您正在压缩已编译的JavaScript并为其创建源映射,则可以使用sourceMap.content

 

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`

 

解析选项

  •  

bare_returns(默认false) - 支持顶级return语句

  •  
  •  

ecma(默认8) -指定的一个5678。注意:此设置目前不会强制执行,除了函数参数列表中的ES8可选尾随逗号和调用ecma 8

  •  
  •  

html5_comments(默认true

  •  
  •  

shebang(默认true) - 支持#!command作为第一行

  •  

压缩选项

  •  

arrows(默认值true:) - 转换()=>{return x}()=>x。如果结果代码更短,则类和对象文字方法也将转换为箭头表达式:m(){return x}变为m:()=>x。此转换要求将ecmacompress选项设置为6或更大。

  •  
  •  

booleans(默认true值:) - 例如,对布尔上下文的各种优化!!a ? b : c → a ? b : c

  •  
  •  

collapse_vars(默认值true:) - 折叠单次使用的非常数变量,允许副作用。

  •  
  •  

comparisons(默认true值:) - 对二进制节点应用某些优化,例如!(a <= b) → a > b(仅当unsafe_comps),尝试否定二进制节点,例如a = !b && !c && !d && !e → a=!(b||c||d||e)等。

  •  
  •  

computed_props(默认true值:) - 将常量计算属性转换为常规属性:{["computed"]: 1}转换为{computed: 1}

  •  
  •  

conditionals(默认值:) true- 对if-s和条件表达式应用优化

  •  
  •  

dead_code(默认true:) - 删除无法访问的代码

  •  
  •  

drop_console(默认值:) false- 传递true放弃对console.*函数的调用 。如果您希望在删除函数调用后删除特定的函数调用,例如console.info和/或保留函数参数的副作用,请pure_funcs改用。

  •  
  •  

drop_debugger(默认:) true- 删除debugger;语句

  •  
  •  

ecma(默认值:) 5- 传递6或更高以启用compress将ES5代码转换为较小的ES6 +等效形式的选项。

  •  
  •  

evaluate(默认值:) true- 尝试计算常量表达式

  •  
  •  

expression(默认值false:) - 传递true以保留终端语句中的完成值,而不用return例如在bookmarklet中。

  •  
  •  

global_defs(默认值:){} - 参见条件编译

  •  
  •  

hoist_funs(默认值false:) - 提升函数声明

  •  
  •  

hoist_props(默认值true:) - 将常量对象和数组文字中的属性提升为受一组约束约束的常规变量。例如: var o={p:1, q:2}; f(o.p, o.q);转换为f(1, 2);。注意:hoist_props 最佳mangle启用,compress选项passes设置为2或更高,并启用该compress选项toplevel

  •  
  •  

hoist_vars(默认false:) - 提升var声明(这是false 默认情况下,因为它似乎通常会增加输出的大小)

  •  
  •  

if_return(默认值:) true- if / return和if / continue的优化

  •  
  •  

inline(默认true:) - 使用simple / returnstatement进行内联调用:

    • false - 与...一样 0
    • 0 - 禁用内联
    • 1 - 内联简单功能
    • 2 - 带参数的内联函数
    • 3 - 带参数和变量的内联函数
    • true - 与...一样 3
  •  

join_vars(默认true:) - 加入连续的var语句

  •  
  •  

keep_classnames(默认值false:) - 传递true以防止压缩器丢弃类名。另请参见:keep_classnames mangle选项

  •  
  •  

keep_fargs(默认值true:) - 防止压缩器丢弃未使用的函数参数。你需要这个依赖的代码Function.length

  •  
  •  

keep_fnames(默认值false:) - 传递true以防止压缩器丢弃功能名称。对于依赖的代码很有用Function.prototype.name。另请参见:keep_fnames mangle选项

  •  
  •  

keep_infinity(默认值false:) - 传递true以防止Infinity被压缩1/0,这可能会导致Chrome出现性能问题。

  •  
  •  

loops(默认true) -优化了dowhile而且for循环时,我们可以静态地判断病情。

  •  
  •  

negate_iife(默认值true:) - 否定返回值被丢弃的“立即调用的函数表达式”,以避免代码生成器插入的parens。

  •  
  •  

passes(默认值:) 1- 运行compress的最大次数。在某些情况下,多次传递会导致进一步压缩的代码。请记住,更多通行证需要更多时间。

  •  
  •  

properties(默认值true:) - 例如,使用点表示法重写属性访问权限foo["bar"] → foo.bar

  •  
  •  

pure_funcs(默认值null:) - 您可以传递一个名称数组,UglifyJS将假定这些函数不会产生副作用。危险:不会检查名称是否在范围内重新定义。例如,这里有一个例子var q = Math.floor(a/b)。如果q其他地方没有使用变量,UglifyJS会丢弃它,但仍会保留Math.floor(a/b),不知道它的作用。你可以传递pure_funcs: [ 'Math.floor' ]让它知道这个函数不会产生任何副作用,在这种情况下整个语句将被丢弃。当前的实现增加了一些开销(压缩会更慢)。

  •  
  •  

pure_getters(默认值:) "strict"- 如果您true为此传递,UglifyJS将假定对象属性访问(例如foo.barfoo["bar"])没有任何副作用。指定"strict"治疗foo.bar如侧无效果的,只有当 foo是一定不能扔,即不nullundefined

  •  
  •  

reduce_funcs(默认值true:) - 允许一次性函数作为函数表达式内联,允许进一步优化。默认情况下启用。选项取决于reduce_vars 启用。如果禁用此选项,则某些代码在Chrome V8引擎中运行得更快。不会对其他主流浏览器产生负面影响。

  •  
  •  

reduce_vars(默认值true:) - 改进对赋值的变量的优化,并将其用作常量值。

  •  
  •  

sequences(默认值true:) - 使用逗号运算符连接连续的简单语句。可以设置为正整数,以指定将生成的连续逗号序列的最大数量。如果此选项设置为 true则默认sequences限制为200。将选项设置为false0 禁用。最小的sequences长度是2。甲sequences的值1 是祖父级等同于true和作为这样的装置200。在极少数情况下,默认序列限制会导致压缩时间非常慢,在这种情况下,20建议使用或更低的值。

  •  
  •  

side_effects(默认值true:) - 传递false以禁用标记为“纯”的可能丢弃的功能。如果注释注释/*@__PURE__*//*#__PURE__*/紧接在调用之前,函数调用将标记为“纯” 。例如:/*@__PURE__*/foo();

  •  
  •  

switches(默认值true:) - 删除重复并删除无法访问的switch分支

  •  
  •  

toplevel(默认false:) - 在顶级作用域中删除未引用的函数("funcs")和/或变量("vars")(false默认情况下,true删除未引用的函数和变量)

  •  
  •  

top_retain(默认值null:) - 防止unused删除特定的顶层函数和变量(可以是数组,逗号分隔,RegExp或函数。意味着toplevel

  •  
  •  

typeofs(默认true:) - 转换typeof foo == "undefined"为 foo === void 0。注意:false由于已知问题,建议将此值设置为IE10及更早版本。

  •  
  •  

unsafe(默认false:) - 应用“不安全”转换(下面的讨论)

  •  
  •  

unsafe_arrows(默认值false:) - 如果函数体未引用,则将ES5样式的匿名函数表达式转换为箭头函数this。注意:如果代码依赖于prototype箭头函数缺少的函数,则执行此转换并不总是安全的。此转换要求将ecmacompress选项设置为6或更大。

  •  
  •  

unsafe_comps(默认值:false) -反向<<=>>=以允许改善的压缩。当两个操作数中的至少一个是具有计算值的对象时,这可能是不安全的,因为使用了像get或等方法valueOf。在比较中的操作数切换之后,这可能导致执行顺序的改变。如果两个压缩只能comparisons和 unsafe_comps都设置为true。

  •  
  •  

unsafe_Function(默认false) -压缩和裂伤Function(args, code) 当两个argscode是字符串文字。

  •  
  •  

unsafe_math(默认值false:) - 优化像2 * x * 3into 6 * x这样的数值表达式 ,这可能会给出不精确的浮点结果。

  •  
  •  

unsafe_methods(默认值:false) - 转换{ m: function(){} }为 { m(){} }ecma必须设置为6或更大才能启用此转换。如果unsafe_methods是RegExp,则具有与RegExp匹配的键的键/值对将转换为简明方法。注意:如果启用,则存在获取“ <method name>不是构造函数” 的风险。如果任何代码尝试new使用前一个函数,则会出现TypeError 。

  •  
  •  

unsafe_proto(默认:) false- 优化表达式,如 Array.prototype.slice.call(a)into[].slice.call(a)

  •  
  •  

unsafe_regexp(默认值:) - 使用与它们是常量相同的方式false启用变量替换 RegExp

  •  
  •  

unsafe_undefined(默认值:) false- 替换void 0是否有一个undefined在作用域中命名的变量(变量名称将被修改,通常缩减为单个字符)

  •  
  •  

unused(默认值true:) - 删除未引用的函数和变量(除非设置为,否则简单的直接变量赋值不计为引用"keep_assign"

  •  
  •  

warnings(默认值false:) - 删除无法访问的代码或未使用的声明等时显示警告

  •  

裂缝选项

  •  

eval(默认false) - 传递true到在使用evalwith使用的范围中可见的mangle名称。

  •  
  •  

keep_classnames(默认false) - 传递true给不是mangle类名。另请参见:keep_classnames compress选项

  •  
  •  

keep_fnames(默认false) - 传递true给非变形函数名称。对于依赖的代码很有用Function.prototype.name。另请参见:keep_fnames compress选项

  •  
  •  

reserved(默认[]) - 传递应该从修改中排除的标识符数组。示例:["foo", "bar"]

  •  
  •  

toplevel(默认false) - 传递true到顶级作用域中声明的mangle名称。

  •  
  •  

safari10(默认false) - 传递true解决Safari 10循环迭代器错误 “无法声明两次let变量”。另请参见:safari10 输出选项

  •  

例子:

// test.js var globalVar;function  funcName( firstLongName, anotherLongName){

     var myVariable = firstLongName +   anotherLongName;

}

 

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属性选项

  •  

builtins(默认值:) falsetrue用于允许修改内置DOM属性。不建议覆盖此设置。

  •  
  •  

debug(默认值false:) - 原始名称的Mangle名称仍然存在。传递空字符串""以启用,或者使用非空字符串来设置调试后缀。

  •  
  •  

keep_quoted(默认值false:) - 仅修改未引用的属性名称。

  •  
  •  

regex(默认值null:) - 将RegExp文字传递给仅与正则表达式匹配的属性名称。

  •  
  •  

reserved(默认值[]:) - 不要破坏reserved数组中列出的属性名称 。

  •  

输出选项

代码生成器默认尝试输出最短代码。如果你想要美化输出,传递--beautify-b)。您可以选择传递控制代码输出的其他参数:

  •  

ascii_only(默认false) - 转义字符串和regexps中的Unicode字符(影响非ascii字符变为无效的指令)

  •  
  •  

beautify(默认true) - 是否真正美化输出。传递-b将此设置为true,但-b即使您想生成缩小的代码,也可能需要传递,以便指定其他参数,以便您可以使用-b beautify=false它来覆盖它。

  •  
  •  

bracketize(默认false) -总是插在括号中iffor, dowhilewith语句,即使他们的身体是一个单独的语句。

  •  
  •  

comments(默认false) - 传递true"all"保留所有注释,"some"保留一些注释,正则表达式字符串(例如/^!/)或函数。

  •  
  •  

ecma(默认5) - 设置输出打印模式。设置ecma6或更大以发出速记对象属性 - 即:{a}而不是{a: a}。该ecma选项仅改变直接控制美化器的输出。抽象语法树中的不兼容功能仍将按原样输出。例如:一个ecma的设置5不会转换器ES6 +代码ES5。

  •  
  •  

indent_level(默认4

  •  
  •  

indent_start(默认0) - 用许多空格为所有行添加前缀

  •  
  •  

inline_script(默认值false) - </script在字符串出现时转义斜杠

  •  
  •  

keep_quoted_props(默认false) - 启用时,防止从对象文字中的属性名称中删除引号。

  •  
  •  

max_line_len(默认false) - 最大行长度(对于uglified代码)

  •  
  •  

preamble(默认null) - 传递时它必须是一个字符串,它将按字面意思添加到输出中。源地图将根据此文本进行调整。例如,可用于插入包含许可信息的注释。

  •  
  •  

preserve_line(默认false) - 传递true以保留行,但只有在beautify设置为时才有效false

  •  
  •  

quote_keys(默认false) - 传递true引用文字对象中的所有键

  •  
  •  

quote_style(默认0) - 字符串的首选引用样式(也影响引用的属性名称和指令):

    • 0 - 更喜欢双引号,当字符串本身有更多双引号时,切换到单引号。0最适合gzip大小。
    • 1 - 始终使用单引号
    • 2 - 始终使用双引号
    • 3 - 始终使用原始报价
  •  

safari10(默认false) - 设置此选项以true解决Safari 10/11 await错误。另请参见:safari10 mangle选项

  •  
  •  

semicolons(默认true) - 用分号分隔语句。如果你通过,false那么我们将尽可能使用换行符而不是分号,从而导致更加可读的uglified代码输出(gzip之前的大小可能更小; gzip之后的大小不大)。

  •  
  •  

shebang(默认true) - #!在序言中保留shebang (bash脚本)

  •  
  •  

webkit(默认false) - 为WebKit错误启用变通办法。PhantomJS用户应该将此选项设置为true

  •  
  •  

width(默认80) - 仅在启用美化时生效,这指定美化者将尝试遵循的(定向)线宽。它指的是行文本的宽度(不包括缩进)。它目前效果不佳,但它确实使UglifyJS生成的代码更具可读性。

  •  
  •  

wrap_iife(默认false) - 传递true以立即包装调用的函数表达式。有关详细信息,请参阅 #640

  •  

保留版权声明或其他评论

您可以传递--comments以保留输出中的某些注释。默认情况下,它将保留包含“@preserve”,“@ license”或“@cc_on”的JSDoc样式注释(IE的条件编译)。您可以传递 --comments all以保留所有注释或有效的JavaScript正则表达式,以仅保留与此正则表达式匹配的注释。例如,--comments /^!/ 将保持评论/*! Copyright Notice */

但请注意,可能存在注释丢失的情况。例如:

function  f(){

     / **  @preserve Foo Bar * /

     function  g(){

         //从不调用此函数 

    } return something();

}

     

即使它具有“@preserve”,注释也将丢失,因为内部函数g(注释附加到的AST节点)被压缩器丢弃而未被引用。

最安全的评论在哪里放置版权信息(或需要保存在输出中的其他信息)是附加到顶级节点的注释。

unsafe compress选项

它允许一些可能在某些人为的情况下破坏代码逻辑的转换,但对于大多数代码应该没问题。您可能希望在自己的代码上尝试它,它应该减少缩小的大小。以下是此标志打开时发生的情况:

  • new Array(1, 2, 3)或者Array(1, 2, 3)[ 1, 2, 3 ]
  • new Object() → {}
  • String(exp)或者exp.toString()"" + exp
  • new Object/RegExp/Function/Error/Array (...) →我们丢弃了 new

条件编译

您可以使用--define-d)开关来声明UglifyJS将假定为常量的全局变量(除非在范围中定义)。例如,如果你通过,--define DEBUG=false那么加上死代码删除,UglifyJS将从输出中丢弃以下内容:

if (DEBUG) {

    console.log("debug stuff");

}

 

您可以以--define env.DEBUG=false。的形式指定嵌套常量。

UglifyJS将警告条件总是错误并且关于丢弃无法访问的代码; 目前没有选项只关闭此特定警告,您可以通过warnings=false关闭所有警告。

另一种方法是将全局变量声明为单独文件中的常量,并将其包含在构建中。例如,您可以拥有build/defines.js包含以下内容的 文件:

var  DEBUG  =  false ;var  PRODUCTION  =  true ;//等

并像这样构建你的代码:

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

UglifyJS将注意到常量,并且由于它们不能被更改,它将评估它们对值本身的引用并像往常一样丢弃无法访问的代码。const如果您使用它们,构建将包含声明。如果您的目标是<ES6不支持的环境,则const使用varwith reduce_vars(默认情况下启用)应该足够了。

条件编译API

您还可以通过编程API使用条件编译。区别在于属性名称是global_defs和压缩器属性:

var result = UglifyJS.minify(fs.readFileSync("input.js", "utf8"), {

    compress: {

        dead_code: true,

        global_defs: {

            DEBUG: false

        }

    }

});

 

要使用任意非常量表达式替换标识符,必须在global_defs键前加上,"@"以指示UglifyJS将值解析为表达式:

UglifyJS.minify("alert('hello');", {

    compress: {

        global_defs: {

            "@alert": "console.log"

        }

    }

}).code;// returns: 'console.log("hello");'

 

否则它将被替换为字符串文字:

UglifyJS.minify("alert('hello');", {

    compress: {

        global_defs: {

            "alert": "console.log"

        }

    }

}).code;// returns: '"console.log"("hello");'

 

 

使用原生的Uglify AST minify()

//示例:仅解析,生成本机Uglify AST

var result =  UglifyJS。minify(code,{

    parse {},

    compress false

    mangle false

    output {

        ast true

        code false   // optional  -  fast if if false 

    }

}); // result.ast包含原生Uglify AST

 

//示例:接受本机Uglify AST输入,然后压缩和修改//           以生成代码和本机AST。

var result =  UglifyJS。minify(ast,{

    compress {},

    mangle {},

    output {

        ast true

        code true   // optional  -  fast if if false 

    }

}); // result.ast包含原生的Uglify AST // result.code包含字符串形式的缩小代码。

使用Uglify AST

天然AST的横向和转化可分别通过TreeWalker和 进行 TreeTransformer

ESTree / SpiderMonkey AST

UglifyJS有自己的抽象语法树格式; 出于 实际原因, 我们无法轻易改变内部使用SpiderMonkey AST。但是,UglifyJS现在有一个可以导入SpiderMonkey AST的转换器。

例如,Acorn是一个产生SpiderMonkey AST的超快速解析器。它有一个小的CLI实用程序,它解析一个文件并在标准输出上以JSON转储AST。使用UglifyJS来修改和压缩:

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

-p spidermonkey选项告诉UglifyJS所有输入文件都不是JavaScript,而是JSON中的SpiderMonkey AST中描述的JS代码。因此,在这种情况下我们不使用自己的解析器,而只是将AST转换为内部AST。

使用Acorn进行解析

更有趣的是,我添加了-p acorn使用Acorn进行所有解析的选项。如果你通过这个选项,UglifyJS会require("acorn")

Acorn真的很快(例如在650K代码上250ms而不是380ms),但转换Acorn生成的SpiderMonkey树需要另外150ms,因此它总是比使用UglifyJS自己的解析器多一点。

Uglify快速缩小模式

它并不为人所知,但是对于大多数JavaScript而言,空格删除和符号修改占缩小代码大小减少的95% - 而不是复杂的代码转换。人们可以简单地禁用compress将Uglify版本加速3到4倍。在这种快速mangle模式下,Uglify具有可比较的缩小速度和gzip大小butternut

d3.js

缩小尺寸

gzip大小

缩短时间(秒)

原版的

451131

108733

-

uglify-js@3.0.24 mangle = false,compress = false

316,600

85 245人

0.70

uglify-js@3.0.24 mangle = true,compress = false

220216

72730

1.13

butternut@0.4.6

217568

72738

1.41

uglify-js@3.0.24 mangle = true,compress = true

212511

71560

3.36

babili@0.1.4

210713

72140

12.64

要从CLI启用快速缩小模式,请使用:

uglifyjs file.js -m

要使用API​​启用快速缩小模式:

UglifyJS。minify(code,{compress  false,mangle  true });

源地图和调试

compress已知各种简化,重新排列,内联和删除代码的转换会对使用源映射进行调试产生负面影响。这是预期的,因为代码已经过优化,并且由于某些代码不再存在,因此通常根本无法进行映射。为了在源映射调试中获得最高保真度,请禁用Uglify compress选项并使用mangle

编译器假设

为了实现更好的优化,编译器做出了各种假设:

  • .toString()并且.valueOf()没有副作用,对于内置对象,它们没有被覆盖。
  • undefinedNaNInfinity没有外部重新定义。
  • arguments.calleearguments.callerFunction.prototype.caller没有使用。
  • 代码不期望特定的内容Function.prototype.toString()或 Error.prototype.stack任何内容。
  • 在普通对象上获取和设置属性不会导致其他副作用(使用.watch()Proxy)。
  • 对象属性可以被添加,删除和修改(不阻止与 Object.defineProperty()Object.defineProperties()Object.freeze(), Object.preventExtensions()Object.seal())。

 

 

打赏
文章版权声明:除非注明,否则均为彭超的博客原创文章,转载或复制请以超链接形式并注明出处。
相关推荐

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

猜你喜欢