壓縮解析js檔案—UglifyJS3中文文件詳細講解-js教程-PHP中文網

<p class="htmledit_views"></p> <h2>UglifyJS中文文件</h2> <p></p> <p>本文檔譯自UglifyJS3文件。 </p> <p>先前翻譯的UglifyJS2中文文檔已移到本專案UglifyJS2分支。 </p> <h2>翻譯序列</h2> <p>由於webpack本身整合了UglifyJS外掛程式（webpack.optimize.UglifyJsPlugin），其指令<code>webpack -p</code>即表示呼叫UglifyJS來壓縮程式碼，還有不少webpack外掛如<code>html-webpack-plugin</code>也會預設使用UglifyJS。因此我們其實經常要用到它，但UglifyJS本身配置較複雜/選項繁多，又沒有中文文檔，使用起來如墜雲霧。鑑於此特譯此文，謬誤甚多，敬請斧正。 </p> <p>字典：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="has">parse 解释 compress 压缩 mangle 混淆 beautify 美化 minify 最小化 CLI 命令行工具 sourcemap 编译后代码对源码的映射，用于网页调试 AST 抽象语法树 name 名字，包括变量名、函数名、属性名 toplevel 顶层作用域 unreachable 不可达代码 option 选项/配置 STDIN 标准输入，指在命令行中直接输入 STDOUT 标准输出 STDERR 标准错误输出 side effects函数副作用，即函数除了返回外还产生别的作用，比如改了全局变量 shebang 释伴（#!）</pre><div class="contentsignin">登入後複製</div></div><p>以下為正文：</p><h1>UglifyJS 3</h1><p>UglifyJS 是js 解釋器、最小化器、壓縮器、美化器工具集（parser, minifier, compressor or beautifier toolkit）。 </p><p>注意:</p><ul class=" list-paddingleft-2"><li><p><strong><code>uglify-js@3</code> 的API 和 CLI簡化，不再向後相容 <code>uglify -js@2</code></strong>.</p></li><li><p><strong>UglifyJS <code>2.x</code> 文件在這裡</strong>.</p></li><li> <p><code>#uglify-js</code> 只支援ECMAScript 5 (ES5).</p></li><li><p>假如希望壓縮ES2015 (ES6 )程式碼，應該使用 <strong>uglify-es </strong>這個<code>npm</code> 包。 </p></li></ul><h2>安裝</h2><p>首先確認一直你已經安裝了最新的node.js(裝完後或許需要重啟一下電腦)</p><p>用NPM安裝CLI：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">npm install uglify-js -g</pre><div class="contentsignin">登入後複製</div></div><p>用NPM下載給程式使用:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">npm install uglify-js</pre><div class="contentsignin">登入後複製</div></div><h1>CLI使用</h1><h1>Command line usage</h1><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> uglifyjs [input files] [options]</pre><div class="contentsignin">登入後複製</div></div><p>UglifyJS可以輸入多個檔案。建議你先寫輸入文件，再傳選項。 UglifyJS會根據壓縮選項，把檔案放在佇列中依序解釋。所有文件都會在同一個全域域中，假如一個文件中的變數、方法被另一個文件引用，UglifyJS會合理地匹配。 </p><p>假如沒有指定文件，UglifyJS會讀取輸入字串（STDIN）。 </p><p>如果你想要把選項寫在檔案名稱的前面，那就要在二者之前加上雙橫線，防止檔案名稱被當成了選項：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> uglifyjs --compress --mangle -- input.js</pre><div class="contentsignin">登入後複製</div></div><h3>CLI選項：</h3><h3>Command line options</h3><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> -h, --help 列出使用指南。 `--help options` 获取可用选项的详情。 -V, --version 打印版本号。 -p, --parse <options> 指定解析器配置选项: `acorn` 使用 Acorn 来解析。 `bare_returns` 允许在函数外return。在压缩CommonJS模块或`.user.js `引擎调用被同步执行函数包裹的用户脚本时会用到。 `expression` 不是解析文件，二是解析一段表达式 (例如解析JSON). `spidermonkey` 输入文件是 SpiderMonkey AST 格式 (JSON). -c, --compress [options] 启用压缩（true/false）/指定压缩配置: `pure_funcs` 传一个函数名的列表，当这些函数返回值没被利用时，该函数会被安全移除。 -m, --mangle [options] 启用混淆（true/false）/指定混淆配置: `reserved` 不被混淆的名字列表。 --mangle-props [options] 混淆属性/指定压缩配置: `builtins` 混淆那些与标准JS全局变量重复的名字。 `debug` 添加debug前缀和后缀。 `domprops` 混淆那些鱼DOM属性名重复的名字。 `keep_quoted` 只混淆没括起来的属性名。 `regex` 只混淆匹配（该正则）的名字。 `reserved` 不需要混淆的名字的列表（即保留）。 -b, --beautify [options] 是否美化输出（true/false）/指定输出配置： `beautify` 默认是启用. `preamble` 预设的输出文件头部。你可以插入一段注释，比如版权信息。它不会被解析，但sourcemap会因此调整。 `quote_style` 括号类型: 0 - auto自动 1 - single单引号 2 - double双引号 3 - original跟随原码 `wrap_iife` 把立即执行函数括起来。注意：你或许应禁用压缩配置中的`negate_iife`选项。 -o, --output <file> 输出文件路径 (默认 STDOUT). 指定 `ast` 或 `spidermonkey`的话分别是输出UglifyJS或SpiderMonkey AST。 --comments [filter] 保留版权注释。默认像Google Closure那样，保留包含"@license"或"@preserve"这样JSDoc风格的注释。你可以传以下的参数： - "all" 保留全部注释 - 一个合适的正则，如 `/foo/` 或 `/^!/`，保留匹配到的注释。注意，在启用压缩时，因为死代码被移除或压缩声明为一行，并非*所有*的注释都会被保留。 --config-file <file> 从此JSON文件读取 `minify()` 配置。 -d, --define <expr>[=value] 定义全局变量。 --ie8 支持IE8。等同于在`minify()`的`compress`、 `mangle` 和 `output`配置设置`ie8: true`。UglifyJS不会默认兼容IE8。 --keep-fnames 不要混淆、干掉的函数的名字。当代码依赖Function.prototype.name时有用。 --name-cache <file> 用来保存混淆map的文件。 --self 把UglifyJS本身也构建成一个依赖包 (等同于`--wrap UglifyJS`) --source-map [options] 启用 source map（true/false）/指定sourcemap配置: `base` 根路径，用于计算输入文件的相对路径。 `content` 输入sourcemap。假如的你要编译的JS是另外的源码编译出来的。假如该sourcemap包含在js内，请指定"inline"。 `filename` 输出文件的名字或位置。 `includeSources` 如果你要在sourcemap中加上源文件的内容作sourcesContent属性，就传这个参数吧。 `root` 此路径中的源码编译后会产生sourcemap. `url` 如果指定此值，会添加sourcemap相对路径在`//#sourceMappingURL`中。 --timings 在STDERR显示操作运行时间。 --toplevel 压缩/混淆在最高作用域中声明的变量名。 --verbose 打印诊断信息。 --warn 打印警告信息。 --wrap <name> 把所有代码包裹在一个大函数中。让“exports”和“global”变量有效。你需要传一个参数来指定此模块的名字，以便浏览器引用。</pre><div class="contentsignin">登入後複製</div></div><p>指定<code>--output</code># (<code>-o</code>)來明確輸出文件，否則將在終端輸出（STDOUT）</p><h2>CLI sourcemap選項</h2><h2>CLI source map options</h2><p>#UglifyJS可以產生一份sourcemap文件，這非常有利於你調試壓縮後的JS程式碼。傳<code>--source-map --output output.js</code>來取得sorcemap檔案（sorcemap會產生為<code>output.js.map</code>）。 </p><p>額外選項：</p><ul class=" list-paddingleft-2"><li><p><code>--source-map filename=<NAME></code> 指定sourcemap名字。 </p></li><li><p><code>--source-map root=<URL></code> 傳一個原始檔的路徑。否則UglifyJS將假定已經使用了HTTP<code>X-SourceMap</code>#，並將省略<code>//＃sourceMappingURL=</code>指示。 </p></li><li><p><code>--source-map url=<URL></code> 指定產生sourcemap的路徑。 </p></li></ul><p>例如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> 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</pre><div class="contentsignin">登入後複製</div></div><p>上述設定會壓縮與混淆<code>file1.js</code>、<code>file2.js</code>，輸出檔<code>foo.min.js</code> 和sourcemap<code>foo.min.js.map</code>，sourcemap會建立<code>http://foo.com/src/js/file1.js</code><code># 、 </code>http://foo.com/src/js/file2.js<code>的對應。（實際上，sourcemap根目錄是</code>http://foo.com/src<code>#，所以相當於原始檔案路徑是</code>js/file1.js<code>、</code>js/file2. js</p>）<h3></h3>關聯sourcemap<h3></h3>Composed source map<p></p>假如你的JS程式碼是用其他編譯器（例如coffeescript）產生的，那麼就對應到JS程式碼就沒什麼用了，你肯定希望映射到CoffeeScript源碼。 UglifyJS有一個選項可以輸入sourcemap，假如你有一個從CoffeeScript → 編譯後JS的map的話，UglifyJS可以產生一個從CoffeeScript->壓縮後JS的map映射到源碼位置。 <p><code>你可以傳入 </code>--source-map content="/path/to/input/source.map"<code>或來嘗試此特性，如果sourcemap包含在js內，則寫</code>--source-map content=inline</p>。 <h2></h2>CLI混淆選項<h2></h2>CLI mangle options<p><code>你需要傳入</code>--mangle<code> (</code>-m</p>)來啟用混淆功能。支援以下選項（以逗號隔開）：<ul class=" list-paddingleft-2"><li><p></p><p><code></code>toplevel</p> — 混淆在最高作用域中宣告的變數名稱（預設disabled） <p></p> </li><li><p></p><code></code>eval<code> - 混淆在</code>eval<code> 或 </code>with<p>作用域出現的變數名稱（預設disabled） </p></li></ul><p><code>當啟用混淆功能時，如果你希望保留一些名字不被混淆，你可以用</code>--mangle reserved</p> 宣告一些名字（用逗號隔開）。例如：<p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> uglifyjs ... -m reserved=[$,require,exports]'</pre><div class="contentsignin">登入後複製</div></div><code>這樣可以防止</code>require<code>, </code>exports<code>和 </code>$</p>混淆改變。 ###<h3>CLI混淆属性名 (<code>--mangle-props</code>)</h3><h3>CLI mangling property names (<code>--mangle-props</code>)</h3><p>**警告：**这能会搞崩你的代码。混淆属性名跟混淆变量名不一样，是相互独立的。传入<code>--mangle-props</code>会混淆对象所有可见的属性名，除了DOM属性名和JS内置的类名。例如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 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());</pre><div class="contentsignin">登入後複製</div></div><p>混淆所有属性（除了JS内置的）:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$ uglifyjs example.js -c -m --mangle-props</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var x={o:0,_:1,l:function(){return this._+this.o}};x.t=2,x.o=3,console.log(x.l());</pre><div class="contentsignin">登入後複製</div></div><p>混淆除了 <code>reserved</code> （保留）外的所有属性:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$ uglifyjs example.js -c -m --mangle-props reserved=[foo_,bar_]</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var x={o:0,foo_:1,_:function(){return this.foo_+this.o}};x.bar_=2,x.o=3,console.log(x._());</pre><div class="contentsignin">登入後複製</div></div><p>混淆匹配<code>regex</code>（正则）的属性：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$ uglifyjs example.js -c -m --mangle-props regex=/_$/</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var x={o:0,_:1,calc:function(){return this._+this.o}};x.l=2,x.o=3,console.log(x.calc());</pre><div class="contentsignin">登入後複製</div></div><p>混用多个混淆属性选项：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$ uglifyjs example.js -c -m --mangle-props regex=/_$/,reserved=[bar_]</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var x={o:0,_:1,calc:function(){return this._+this.o}};x.bar_=2,x.o=3,console.log(x.calc());</pre><div class="contentsignin">登入後複製</div></div><p>为了混淆正常使用，我们默认避免混淆标准JS内置的名字（<code>--mangle-props builtins</code>可以强制混淆）。</p><p><code>tools/domprops.json</code> 里有一个默认的排除名单，包括绝大部分标准JS和多种浏览器中的DOM属性名。传入<code>--mangle-props domprops</code> 可以让此名单失效。</p><p>可以用正则表达式来定义该混淆的属性名。例如<code>--mangle-props regex=/^_/</code>，只混淆下划线开头的属性。</p><p>当你压缩多个文件时，为了保证让它们最终能同时工作，我们要让他们中同样的属性名混淆成相同的结果。传入<code>--name-cache filename.json</code>，UglifyJS会维护一个共同的映射供他们复用。这个json一开始应该是空的，例如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$ 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</pre><div class="contentsignin">登入後複製</div></div><p>这样<code>part1.js</code> 和 <code>part2.js</code>会知晓对方混淆的属性名。</p><p>假如你把所有文件压缩成同一个文件，那就不需要启用名字缓存了。</p><p>混淆没括起来的名字(<code>--mangle-props keep_quoted</code>)</p><h3>Mangling unquoted names (<code>--mangle-props keep_quoted</code>)</h3><p>使用括号属性名 (<code>o["foo"]</code>)以保留属性名(<code>foo</code>)。这会让整个脚本中其余此属性的引用(<code>o.foo</code>)也不被混淆。例如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// stuff.js var o = { "foo": 1, bar: 3 }; o.foo += o.bar; console.log(o.foo);</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$ uglifyjs stuff.js --mangle-props keep_quoted -c -m</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var o={foo:1,o:3};o.foo+=o.o,console.log(o.foo);</pre><div class="contentsignin">登入後複製</div></div><p>调试属性名混淆</p><h3>Debugging property name mangling</h3><p>为了混淆属性时不至于完全分不清，你可以传入<code>--mangle-props debug</code>来调试。例如<code>o.foo</code>会被混淆成<code>o._$foo$_</code>。这让源码量大、属性被混淆时也可以debug，可以看清混淆会把哪些属性搞乱。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">$ uglifyjs stuff.js --mangle-props debug -c -m</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var o={_$foo$_:1,_$bar$_:3};o._$foo$_+=o._$bar$_,console.log(o._$foo$_);</pre><div class="contentsignin">登入後複製</div></div><p>你可以用<code>--mangle-props-debug=XYZ</code>来传入自定义后缀。让<code>o.foo</code> 混淆成 <code>o._$foo$XYZ_</code>，你可以在每次编译是都改变一下，来辨清属性名怎么被混淆的。一个小技巧，你可以每次编译时传随机数来模仿混淆操作（例如你更新了脚本，有了新的属性名），这有助于识别混淆时的出错。</p><h1>API参考</h1><h1>API Reference</h1><p>假如是通过NPM安装的，你可以在你的应用中这样加载UglifyJS：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var UglifyJS = require("uglify-js");</pre><div class="contentsignin">登入後複製</div></div><p>这输出一个高级函数**<code>minify(code, options)</code>**，它能根据配置，实现多种最小化（即压缩、混淆等）。 <code>minify()</code>默认启用压缩和混淆选项。例子：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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}</pre><div class="contentsignin">登入後複製</div></div><p>你可以通过一个对象（key为文件名，value为代码）来同时<code>最小化</code>多个文件：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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));</pre><div class="contentsignin">登入後複製</div></div><p><code>toplevel</code>选项例子：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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);</pre><div class="contentsignin">登入後複製</div></div><p><code>nameCache</code> 选项例子:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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));</pre><div class="contentsignin">登入後複製</div></div><p>你可以像下面这样把名字缓存保存在文件中：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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");</pre><div class="contentsignin">登入後複製</div></div><p>综合使用多种<code>minify()</code>选项的例子：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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);"</pre><div class="contentsignin">登入後複製</div></div><p>生成警告提示：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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}</pre><div class="contentsignin">登入後複製</div></div><p>生成错误提示：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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}</pre><div class="contentsignin">登入後複製</div></div><p>Note: unlike <code>uglify-js@2.x</code>, the <code>3.x</code> API does not throw errors. To achieve a similar effect one could do the following:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var result = UglifyJS.minify(code, options); if (result.error) throw result.error;</pre><div class="contentsignin">登入後複製</div></div><h2>最小化选项</h2><h2>Minify options</h2><ul class=" list-paddingleft-2"><li><p></p><p><code>warnings</code> (default <code>false</code>) — 传 <code>true</code>的话，会在<code>result.warnings</code>中返回压缩过程的警告。传 <code>"verbose"</code>获得更详细的警告。</p><p> </p></li><li><p></p><code>parse</code> (default <code>{}</code>) — 如果你要指定额外的解析配置parse options,传配置对象。<p></p></li><li><code>compress</code> (default <code>{}</code>) — 传<code>false</code>就完全跳过压缩。传一个对象来自定义压缩配置compress options。<br/></li><li><p></p><code>mangle</code> (default <code>true</code>) — 传 <code>false</code>就跳过混淆名字。传对象来指定混淆配置mangle options (详情如下).<br/></li><li><p><code>mangle.properties</code> (default <code>false</code>) — 传一个对象来自定义混淆属性配置mangle property options.</p></li><ul class=" list-paddingleft-2" style="list-style-type: square;"><li><code>output</code> (default <code>null</code>) — 要自定义就传个对象来指定额外的输出配置output options. 默认是压缩到最优化。<p></p></li></ul><li><p></p><code>sourceMap</code> (default <code>false</code>) - 传一个对象来自定义 sourcemap配置source map options.<br/></li><li><p></p><code>toplevel</code> (default <code>false</code>) - 如果你要混淆（和干掉没引用的）最高作用域中的变量和函数名，就传<code>true</code>。<br/></li><li><p></p><code>nameCache</code> (default <code>null</code>) - 如果你要缓存 <code>minify()</code>多处调用的经混淆的变量名、属性名，就传一个空对象<code>{}</code>或先前用过的<code>nameCache</code>对象。注意:这是个可读/可写属性。<code>minify()</code>会读取这个对象的nameCache状态，并在最小化过程中更新，以便保留和供用户在外部使用。<br/></li><li><p></p><code>ie8</code> (default <code>false</code>) - 传 <code>true</code> 来支持 IE8.<br/></li><li><p></p></li></ul><h2>最小化配置的结构</h2><h2>Minify options structure</h2><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">{ warnings: false, 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, }</pre><div class="contentsignin">登入後複製</div></div><h3>sourcemap配置</h3><h3>Source map options</h3><p>这样生成sourcemap：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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</pre><div class="contentsignin">登入後複製</div></div><p>要注意，此时sourcemap并不会保存为一份文件，它只会返回在<code>result.map</code>中。 <code>sourceMap.url</code> 传入的值只用来在<code>result.code</code>中设置<code>//# sourceMappingURL=out.js.map</code> ，<code>filename</code> 的值只用来在sourcemap文件中设置 <code>file</code>属性(详情看规范)。</p><p>你可以把<code>sourceMap.url</code>设为<code>true</code> ，这样sourcemap会加在代码末尾。</p><p>你也可以指定sourcemap中的源文件根目录（sourceRoot）属性：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var result = UglifyJS.minify({"file1.js": "var a = function() {};"}, { sourceMap: { root: "http://example.com/src", url: "out.js.map" } });</pre><div class="contentsignin">登入後複製</div></div><p>如果你要压缩<em>从其他文件编译得来的</em>带一份sourcemap的JS文件，你可以用<code>sourceMap.content</code>参数：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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`</pre><div class="contentsignin">登入後複製</div></div><p>如果你要用<code>X-SourceMap</code>请求头，你可以忽略 <code>sourceMap.url</code>。</p><h2>解析配置</h2><h2>Parse options</h2><ul class=" list-paddingleft-2"><li><p><code>bare_returns</code> (default <code>false</code>) -- 支持在顶级作用域中 <code>return</code> 声明。</p></li><li><p><code>html5_comments</code> (default <code>true</code>)</p></li><li><p><code>shebang</code> (default <code>true</code>) -- 支持在第一行用 <code>#!command</code></p></li></ul><h2>压缩配置</h2><h2>Compress options</h2><ul class=" list-paddingleft-2"><li><p></p><p><code>sequences</code>(default: true) -- 连续声明变量，用逗号隔开来。可以设置为正整数来指定连续声明的最大长度。如果设为<code>true</code> 表示默认<code>200</code>个，设为<code>false</code>或<code>0</code>则禁用。 <code>sequences</code>至少要是<code>2</code>,<code>1</code>的话等同于<code>true</code>（即<code>200</code>)。默认的sequences设置有极小几率会导致压缩很慢，所以推荐设置成<code>20</code>或以下。</p><p> </p></li><li><p></p><code>properties</code> -- 用<code>.</code>来重写属性引用，例如<code>foo["bar"] → foo.bar</code><p></p></li><li><code>dead_code</code> -- 移除没被引用的代码<br/></li><li><p></p><code>drop_debugger</code> -- 移除 <code>debugger;</code><br/></li><li><p></p><code>unsafe</code> (default: false) -- 使用 "unsafe"转换 (下面详述)<br/></li><li><p></p><code>unsafe_comps</code> (default: false) -- 保留<code><</code> 和 <code><=</code>不被换成 <code>></code> 和 <code>>=</code>。假如某些运算对象是用<code>get</code>或 <code>valueOf</code>object得出的时候，转换可能会不安全，可能会引起运算对象的改变。此选项只有当 <code>comparisons</code>和<code>unsafe_comps</code> 都设为true时才会启用。<br/></li><li><p></p><code>unsafe_Func</code> (default: false) -- 当 <code>Function(args, code)</code>的<code>args</code> 和 <code>code</code>都是字符串时，压缩并混淆。<br/></li><li><p></p><code>unsafe_math</code> (default: false) -- 优化数字表达式，例如<code>2 * x * 3</code> 变成 <code>6 * x</code>, 可能会导致不精确的浮点数结果。<br/></li><li><p></p><code>unsafe_proto</code> (default: false) -- 把<code>Array.prototype.slice.call(a)</code> 优化成 <code>[].slice.call(a)</code><br/></li><li><p></p><code>unsafe_regexp</code> (default: false) -- 如果<code>RegExp</code> 的值是常量，替换成变量。<br/></li><li><p></p><code>conditionals</code> -- 最佳化<code>if</code>等判斷以及條件選擇<br/></li><li><code>#comparisons</code> -- 把結果必然的運算優化成二元運算，例如<code>!(a <= b) → a > b</code> (只有設定了 <code>unsafe_comps</code>時才生效)；盡量轉成否運算。例如 <code>a = !b && !c && !d && !e → a=!(b||c||d||e)</code><p></p></li><li><code>evaluate</code> -- 嘗試計算常數表達式<br/></li><li><p></p><code>#booleans</code> -- 最佳化布林運算，例如 <code>!!a? b : c → a ? b : c</code><br/></li><li><p></p><code>typeofs</code> -- 預設 <code>true</code>. 轉換 <code>#typeof foo == "undefined"</code> 成 <code>foo === void 0</code>. 注意：如果要適合IE10或以下，由於已知的問題，建議設為<code>false</code> 。 <br/></li><li><p></p><code>loops</code> -- 當<code>do</code>、<code>while</code> 、 <code>for</code>循環的判斷條件可以確定是，對其進行最佳化。 <br/></li><li><p></p><code>unused</code> -- 幹掉沒有被引用的函數和變數。（除非設定<code>"keep_assign"</code>，否則變數的簡單直接賦值也不算被引用。）<br/></li><li><p></p><code>toplevel</code> --幹掉頂層作用域中沒有被引用的函數(<code>"funcs"</code>)和/或變數(<code>"vars"</code>) (預設為<code>false</code> , <code> true</code> 的話即函數變數都會被幹掉)<br/></li><li><p></p><code>top_retain</code> -- 當設定了<code>unused</code>時，保留頂層作用域中的某些函數變數。 (可以寫成數組，用逗號隔開，也可以用正規或函數.參考 <code>toplevel</code>)<br/></li><li><p></p><code>hoist_funs</code> --提升函數宣告<br/></li><li><p></p><code>hoist_vars</code> (default: false) -- 提升 <code>var</code> 宣告(預設為<code>false</code>,因為那會加大檔案的size)<br/></li><li><p></p><code>if_return</code> -- 最佳化if/return 和if/continue<br/></li><li><p></p><code>#inline</code> -- 包裝簡單函數。 <br/></li><li><p></p><code>join_vars</code> -- 合併連續 <code>var</code> 宣告<br/></li><li><p></p><code>cascade</code> -- 軟弱地優化連續宣告, 將 <code>x, x</code> 轉成 <code>x</code>，<code>x = something(), x</code> 轉成 <code>x = something()</code><br/></li><li><p></p><code>collapse_vars</code> -- 當 <code>var</code> 與 <code>const</code> 單獨使用時盡量合併<br/></li><li><p></p><code>reduce_vars</code> -- 最佳化某些變數其實是依照常數值來賦值、使用的情況。 <br/></li><li><p></p><code>warnings</code> -- 當刪除沒有用處的程式碼時，顯示警告<br/></li><li><p></p><code>negate_iife</code> -- 當一個立即執行函數（IIFE）的回傳值沒用時，取消之。避免程式碼產生器會插入括號。 <br/></li><li><p></p><code>pure_getters</code> -- 預設是 <code>false</code>. 如果你傳入<code>true</code>，UglifyJS會假設對象屬性的引用（例如<code>foo.bar</code> 或 <code>foo["bar"]</code>）沒有函數副作用。 <br/></li><li><p></p><code>pure_funcs</code> -- 預設 <code>null</code>. 你可以傳入一個名字的陣列，UglifyJS會假設這些函數沒有函數副作用。 **警告：**假如名字在作用域中重新定義，不會再偵測。例如<code>var q = Math.floor(a/b)</code>，假如變數<code>q</code>沒有被引用，UglifyJS會幹掉它，但 <code>Math.floor(a/b)</code>會被保留，沒有人知道它是幹嘛的。你可以設定<code>pure_funcs: [ 'Math.floor' ]</code> ，這樣函數會被認為沒有函數副作用，這樣整個宣告會被放棄。在目前的執行情況下，會增加開銷（壓縮會變慢）。 <br/></li><li><p></p><code>drop_console</code> -- 預設 <code>false</code>. 傳<code>true</code>的話會幹掉<code>console.* </code>函數。如果你要幹掉特定的函數例如<code>console.info</code> ，又想刪除後保留其參數中的副作用，那就用<code>pure_funcs</code>來處理吧。 <br/></li><li><p></p><code>expression</code> -- 預設 <code>false</code>。傳<code>true</code>來保留終端語句中沒有"return"的完成值。例如在bookmarklets。 <br/></li><li><p></p><code>keep_fargs</code> -- 預設<code>true</code>。阻止壓縮器幹掉那些沒有用到的函數參數。你需要它來保護某些依賴<code>Function.length</code>的函數。 <br/></li><li><p></p><code>keep_fnames</code> -- 預設 <code>false</code>。傳 <code>true</code>來防止壓縮器幹掉函數名稱。對那些依賴<code>Function.prototype.name</code>的函數很有用。延展閱讀：<code>keep_fnames</code> 混淆選項.<br/></li><li><p></p><code>passes</code> -- 默认 <code>1</code>。运行压缩的次数。在某些情况下，用一个大于1的数字参数可以进一步压缩代码大小。注意：数字越大压缩耗时越长。<br/></li><li><p></p><code>keep_infinity</code> -- 默认 <code>false</code>。传<code>true</code>以防止压缩时把<code>1/0</code>转成<code>Infinity</code>，那可能会在chrome上有性能问题。<br/></li><li><p></p><code>side_effects</code> -- 默认 <code>true</code>. 传<code>false</code>禁用丢弃纯函数。如果一个函数被调用前有一段<code>/*@__PURE__*/</code> or <code>/*#__PURE__*/</code>注释，该函数会被标注为纯函数。例如 <code>/*@__PURE__*/foo();</code><br/></li><li><p></p></li></ul><h2>混淆配置</h2><h2>Mangle options</h2><ul class=" list-paddingleft-2"><li><p></p><p><code>reserved</code> (default <code>[]</code>)。传一个不需要混淆的名字的数组。 Example: <code>["foo", "bar"]</code>.</p><p> </p></li><li><p></p><code>toplevel</code> (default <code>false</code>)。混淆那些定义在顶层作用域的名字（默认禁用）。ß<p></p></li><li><code>keep_fnames</code>(default <code>false</code>)。传<code>true</code>的话就不混淆函数名。对那些依赖<code>Function.prototype.name</code>的代码有用。延展阅读：<code>keep_fnames</code> 压缩配置.<br/></li><li><p></p><code>eval</code> (default <code>false</code>)。混淆那些在with或eval中出现的名字。<br/></li><li><p></p></li></ul><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// test.js var globalVar; function funcName(firstLongName, anotherLongName) { var myVariable = firstLongName + anotherLongName; }</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">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;'</pre><div class="contentsignin">登入後複製</div></div><h3>混淆属性的配置</h3><h3>Mangle properties options</h3><ul class=" list-paddingleft-2"><li><p><code>reserved</code> (default: <code>[]</code>) -- 不混淆在<code>reserved</code> 数组里的属性名.</p><p><code>regex</code> (default: <code>null</code>) -— 传一个正则，只混淆匹配该正则的属性名。</p></li><li><p><code>keep_quoted</code> (default: <code>false</code>) -— 只混淆不在括号内的属性名.</p></li><li><p><code>debug</code> (default: <code>false</code>) -— 用原名字来组成混淆后的名字. 传空字符串<code>""</code> 来启用,或者非空字符串作为debu后缀。（例如<code>"abc"</code>, <code>foo.bar</code>=><code>foo.barabc</code>)</p></li><li><p><code>builtins</code> (default: <code>false</code>) -- 传 <code>true</code>的话，允许混淆内置的DOM属性名。不推荐使用。</p></li></ul><h2>输出配置</h2><h2>Output options</h2><p>代码生成器默认会尽量输出最简短的代码。假如你要美化一下输出代码，可以传<code>--beautify</code> (<code>-b</code>)。你也可以传更多的参数来控制输出代码：</p><ul class=" list-paddingleft-2"><li><p></p><p><code>ascii_only</code> (default <code>false</code>) -- 忽略字符串和正则（导致非ascii字符失效）中的Unicode字符。</p><p> </p></li><li><p></p><code>beautify</code> (default <code>true</code>) -- 是否美化输出代码。传<code>-b</code>的话就是设成true。假如你想生成最小化的代码同时又要用其他设置来美化代码，你可以设<code>-b beautify=false</code>。<p></p></li><li><code>bracketize</code> (default <code>false</code>) -- 永远在<code>if</code>, <code>for</code>,<code>do</code>, <code>while</code>, <code>with</code>后面加上大括号，即使循环体只有一句。<br/></li><li><p></p><code>comments</code> (default <code>false</code>) -- 传 <code>true</code> 或 <code>"all"</code>保留全部注释,传 <code>"some"</code>保留部分，传正则 (例如 <code>/^!/</code>) 或者函数也行。<br/></li><li><p></p><code>indent_level</code> (default 4) 缩进格数<br/></li><li><p></p><code>indent_start</code> (default 0) -- 每行前面加几个空格<br/></li><li><p></p><code>inline_script</code> (default <code>false</code>) -- 避免字符串中出现<code></script</code>中的斜杠<br/></li><li><p></p><code>keep_quoted_props</code> (default <code>false</code>) -- 如果启用，会保留对象属性名的引号。<br/></li><li><p></p><code>max_line_len</code> (default 32000) -- 最大行宽（压缩后的代码）<br/></li><li><p></p><code>space-colon</code> (default <code>true</code>) -- 在冒号后面加空格<br/></li><li><p></p><code>preamble</code> (default <code>null</code>) -- 如果要传的话，必须是字符串。它会被加在输出文档的前面。sourcemap会随之调整。例如可以用来插入版权信息。<br/></li><li><p></p><code>preserve_line</code> (default <code>false</code>) -- 传 <code>true</code> 就保留空行，但只在<code>beautify</code> 设为<code>false</code>时有效。ß<br/></li><li><p></p><code>quote_keys</code> (default <code>false</code>) -- 传<code>true</code>的话会在对象所有的键加上括号<br/></li><li><p></p><code>quote_style</code> (default <code>0</code>) -- 影响字符串的括号格式（也会影响属性名和指令）。<br/></li><li><p></p><code>0</code> -- 倾向使用双引号，字符串里还有引号的话就是单引号。<br/></li><li><p></p><code>1</code> -- 永远单引号<br/></li><li><p></p><code>2</code> -- 永远双引号<br/></li><li><p></p><code>3</code> -- 永远是本来的引号<br/></li><li><p></p><code>semicolons</code> (default <code>true</code>) -- 用分号分开多个声明。如果你传<code>false</code>,则总会另起一行，增强输出文件的可读性。（gzip前体积更小，gzip后稍大一点点）<br/></li><li><p></p><code>shebang</code> (default <code>true</code>) -- 保留开头的 shebang <code>#!</code> (bash 脚本)<br/></li><li><p></p><code>width</code> (default 80) -- 仅在美化时生效，设定一个行宽让美化器尽量实现。这会影响行中文字的数量（不包括缩进）。当前本功能实现得不是非常好，但依然让美化后的代码可读性大大增强。<br/></li><li><p></p><code>wrap_iife</code> (default <code>false</code>) --传<code>true</code>的话，把立即执行函数括起来。更多详情看这里 #640<br/></li><li><p></p></li></ul><h1>综合应用</h1><h1>Miscellaneous</h1><h3>保留版权告示或其他注释</h3><p>你可以传入<code>--comments</code>让输出文件中保留某些注释。默认时会保留JSDoc-style的注释（包含"@preserve","@license" 或 "@cc_on"（为IE所编译））。你可以传入<code>--comments all</code>来保留全部注释，或者传一个合法的正则来保留那些匹配到的注释。例如<code>--comments /^!/</code>会保留<code>/*! Copyright Notice */</code>这样的注释。</p><p>注意，无论如何，总会有些注释在某些情况下会丢失。例如：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">function f() { /** @preserve Foo Bar */ function g() { // this function is never called } return something(); }</pre><div class="contentsignin">登入後複製</div></div><p>即使里面带有"@preserve"，注释依然会被丢弃。因为内部的函数<code>g</code>（注释所依附的抽象语法树节点）没有被引用、会被压缩器干掉。</p><p>书写版权信息（或其他需要在输出文件中保留的信息）的最安全位置是全局节点。</p><h3><code>unsafe``compress</code>配置</h3><h3>The <code>unsafe</code> <code>compress</code> option</h3><p>在某些刻意营造的案例中，启用某些转换<strong>有可能</strong>会打断代码的逻辑，但绝大部分情况下是安全的。你可能会想尝试一下，因为这毕竟会减少文件体积。以下是某些例子：</p><ul class=" list-paddingleft-2"><li><p><code>new Array(1, 2, 3)</code> 或 <code>Array(1, 2, 3)</code> → <code>[ 1, 2, 3 ]</code></p></li><li><p><code>new Object()</code> → <code>{}</code></p></li><li><p><code>String(exp)</code> 或 <code>exp.toString()</code> → <code>"" + exp</code></p></li><li><p><code>new Object/RegExp/Function/Error/Array (...)</code> → 我们干掉用<code>new</code>的</p></li><li><p><code>void 0</code> → <code>undefined</code> (假如作用域中有一个变量名叫"undefined";我们这么做是因为变量名会被混淆成单字符）</p></li></ul><h3>编译条件语句</h3><h3>Conditional compilation</h3><p>Uglify会假设全局变量都是常量(不管是否在局部域中定义了)，你可以用<code>--define</code> (<code>-d</code>)来实现定义全局变量。例如你传<code>--define DEBUG=false</code>，UglifyJS会在输出中干掉下面代码：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">if (DEBUG) { console.log("debug stuff"); }</pre><div class="contentsignin">登入後複製</div></div><p>你可以像<code>--define env.DEBUG=false</code>这样写嵌套的常量。</p><p>在干掉那些永否的条件语句以及不可达代码时，UglifyJS会给出警告。现在没有选项可以禁用此特性，但你可以设置 <code>warnings=false</code> 来禁掉<em>所有</em>警告。</p><p>另一个定义全局常量的方法是，在一个独立的文档中定义，再引入到构建中。例如你有一个这样的<code>build/defines.js</code>：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">const DEBUG = false; const PRODUCTION = true; // 等等</pre><div class="contentsignin">登入後複製</div></div><p>这样构建你的代码：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"> uglifyjs build/defines.js js/foo.js js/bar.js... -c</pre><div class="contentsignin">登入後複製</div></div><p>UglifyJS会注意到这些常量。因为它们无法改变，所以它们会被认为是没被引用而被照样干掉。如果你用<code>const</code>声明，构建后还会被保留。如果你的运行环境低于ES6、不支持<code>const</code>，请用<code>var</code>声明加上<code>reduce_vars</code>设置（默认启用）来实现。</p><p>编译条件语句API</p><p>你也可以通过程序API来设置编译配置。其中有差别的是一个压缩器属性<code>global_defs</code>：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var result = UglifyJS.minify(fs.readFileSync("input.js", "utf8"), { compress: { dead_code: true, global_defs: { DEBUG: false } } });</pre><div class="contentsignin">登入後複製</div></div><p>在<code>global_defs</code>配<code>"@"</code>前缀的表达式，UglifyJS才会替换成语句表达式：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">UglifyJS.minify("alert('hello');", { compress: { global_defs: { "@alert": "console.log" } } }).code; // returns: 'console.log("hello");'</pre><div class="contentsignin">登入後複製</div></div><p>否则会替换成字符串:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">UglifyJS.minify("alert('hello');", { compress: { global_defs: { "alert": "console.log" } } }).code; // returns: '"console.log"("hello");'</pre><div class="contentsignin">登入後複製</div></div><h3>使用<code>minify()</code>获得原生UglifyJS ast</h3><h3>Using native Uglify AST with <code>minify()</code></h3><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 例子: 只解析代码，获得原生Uglify AST var result = UglifyJS.minify(code, { parse: {}, compress: false, mangle: false, output: { ast: true, code: false // optional - faster if false } }); // result.ast 即是原生 Uglify AST</pre><div class="contentsignin">登入後複製</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// 例子: 输入原生 Uglify AST，接着把它压缩并混淆，生成代码和原生ast var result = UglifyJS.minify(ast, { compress: {}, mangle: {}, output: { ast: true, code: true // 可选，false更快 } }); // result.ast 是原生 Uglify AST // result.code 是字符串格式的最小化后的代码</pre><div class="contentsignin">登入後複製</div></div><h3>使用 Uglify AST</h3><h3>Working with Uglify AST</h3><p>可以通过<code>TreeWalker</code>和<code>TreeTransformer</code>分别横截（？transversal）和转换原生AST。</p><h3>ESTree/SpiderMonkey AST</h3><p>UglifyJS有自己的抽象语法树格式；为了某些现实的原因我们无法在内部轻易地改成使用SpiderMonkey AST。但UglifyJS现在有了一个可以输入SpiderMonkeyAST的转换器。例如Acorn ，这是一个超级快的生成SpiderMonkey AST的解释器。它带有一个实用的迷你CLI，能解释一个文件、把AST转存为JSON并标准输出。可以这样用UglifyJS来压缩混淆：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="has"> acorn file.js | uglifyjs --spidermonkey -m -c</pre><div class="contentsignin">登入後複製</div></div><p><code>-p --spidermonkey</code>选项能让UglifyJS知道输入文件并非JavaScript，而是SpiderMonkey AST生成的JSON代码。这事我们不用自己的解释器，只把AST转成我们内部AST。</p><h3>使用 Acorn 来解释代码</h3><h3>Use Acorn for parsing</h3><p>更有趣的是，我们加了 <code>-p --acorn</code>选项来使用Acorn解释所有代码。如果你传入这个选项，UglifyJS会<code>require("acorn")</code></p><p>Acorn确实非常快（650k代码原来要380ms，现在只需250ms），但转换Acorn产生的SpiderMonkey树会额外花费150ms。所以总共比UglifyJS自己的解释器还要多花一点时间。</p><h3>Uglify快速最小化模式</h3><h3>Uglify Fast Minify Mode</h3><p>很少人知道，对大多数js代码而言，其实移除空格和混淆符号已经占了减少代码体积之中到的95%--不必细致地转换。简单地禁用<code>压缩compress</code>能加快UglifyJS的构建速度三四倍。我们可以比较一下 <code>butternut</code>和只使用<code>混淆mangle</code>的模式的Uglify的压缩速度与gzip大小： <code>butternut</code>:</p><table><thead><tr class="firstRow"><th>d3.js</th> <th>minify size</th> <th>gzip size</th> <th>minify time (seconds)</th> </tr></thead><tbody><tr><td>original</td> <td>451,131</td> <td>108,733</td> <td>-</td> </tr><tr><td>uglify-js@3.0.24 mangle=false, compress=false</td> <td>316,600</td> <td>85,245</td> <td>0.70</td> </tr><tr><td>uglify-js@3.0.24 mangle=true, compress=false</td> <td>220,216</td> <td>72,730</td> <td>1.13</td> </tr><tr><td>butternut@0.4.6</td> <td>217,568</td> <td>72,738</td> <td>1.41</td> </tr><tr><td>uglify-js@3.0.24 mangle=true, compress=true</td> <td>212,511</td> <td>71,560</td> <td>3.36</td> </tr><tr><td>babili@0.1.4</td> <td>210,713</td> <td>72,140</td> <td>12.64</td> </tr></tbody></table><p>在CLI中，这样启用快速最小化模式:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">uglifyjs file.js -m</pre><div class="contentsignin">登入後複製</div></div><p>API这样用:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">UglifyJS.minify(code, { compress: false, mangle: true });</pre><div class="contentsignin">登入後複製</div></div><p>相关文章：</p> <p><a href="http://www.php.cn/php-notebook-170781.html" target="_self">JS文件压缩成PNG图像存储方法 </a></p> <p><a href="http://www.php.cn/php-notebook-234709.html" target="_self">压缩文件解压器: 文件解压压缩 </a></p>

以上是壓縮解析js檔案—UglifyJS3中文文件詳細講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！