JS-Dateien komprimieren und analysieren – die chinesische Dokumentation von UglifyJS3 erklärt ausführlich-js-Tutorial-php.cn

<p class="htmledit_views"></p> <h2>UglifyJS Chinesisches Dokument</h2> <p></p> <p>Dieses Dokument wurde aus dem UglifyJS3-Dokument übersetzt. </p> <p>Die zuvor übersetzte chinesische UglifyJS2-Dokumentation wurde in den UglifyJS2-Zweig dieses Projekts verschoben. </p> <h2>Übersetzungssequenz</h2> <p>Da das Webpack selbst das UglifyJS-Plugin (webpack.optimize.UglifyJsPlugin) integriert, bedeutet sein Befehl <code>webpack -p</code>, dass UglifyJS aufgerufen wird, um den Code zu komprimieren. Es gibt auch viele Webpack-Plugins -ins wie <code>html-webpack-plugin</code> UglifyJS werden ebenfalls standardmäßig verwendet. Daher verwenden wir es tatsächlich oft, aber UglifyJS selbst hat eine komplizierte Konfiguration/viele Optionen und es gibt keine chinesische Dokumentation, was die Verwendung verwirrend macht. Da die Übersetzung dieses Artikels viele Fehler enthält, korrigieren Sie mich bitte. </p> <p>Wörterbuch: </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">Nach dem Login kopieren</div></div><p>Das Folgende ist der Text: </p><h1>UglifyJS 3</h1><p>UglifyJS ist ein JS-Interpreter, Minimierer, Kompressor und Verschönerungstool-Set ( Parser, Minifier, Kompressor oder Beautifier-Toolkit). </p><p>Hinweis: Die API und CLI von </p><ul class=" list-paddingleft-2"><li><p><strong><code>uglify-js@3</code> wurden vereinfacht und sind nicht mehr abwärtskompatibel <code>uglify-js@2</code></strong>.</p> </li><li><p><strong>UglifyJS <code>2.x</code> Dokumentation hier</strong>.</p></li><li><p><code>uglify-js</code> Unterstützt nur ECMAScript 5 (ES5).</p></li> <li><p>Wenn Sie ES2015+ (ES6+)-Code komprimieren möchten, sollten Sie das Paket <strong>uglify-es</strong> verwenden. <code>npm</code></p></li></ul>Installation<h2></h2>Stellen Sie zunächst sicher, dass Sie die neueste node.js installiert haben (möglicherweise müssen Sie Ihren Computer nach der Installation neu starten)<p></p>Installation mit 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">Nach dem Login kopieren</div></div></p>Verwenden Sie NPM zum Herunterladen in das Programm:<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">Nach dem Login kopieren</div></div></p>CLI-Verwendung<h1></h1>Befehlszeilenverwendung<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">Nach dem Login kopieren</div></div></h1>UglifyJS kann mehrere Dateien eingeben. Es wird empfohlen, zuerst die Eingabedatei zu schreiben und dann die Optionen zu übergeben. UglifyJS stellt die Dateien in die Warteschlange und interpretiert sie der Reihe nach entsprechend den Komprimierungsoptionen. Alle Dateien befinden sich in derselben globalen Domäne. Wenn Variablen und Methoden in einer Datei von einer anderen Datei referenziert werden, passt UglifyJS sie angemessen an. <p></p>Wenn keine Datei angegeben ist, liest UglifyJS die Eingabezeichenfolge (STDIN). <p></p>Wenn Sie Optionen vor den Dateinamen schreiben möchten, fügen Sie vor den beiden einen doppelten Bindestrich ein, um zu verhindern, dass der Dateiname als Option betrachtet wird: <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">Nach dem Login kopieren</div></div></p>CLI-Optionen: <h3></h3>Befehlszeilenoptionen<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">Nach dem Login kopieren</div></div></h3>Geben Sie <p> (<code>--output</code>) an, um die Datei explizit auszugeben, andernfalls erfolgt die Ausgabe (STDOUT) im Terminal <code>-o</code></p>CLI-Sourcemap-Option <h2></h2>CLI-Quellzuordnungsoptionen<h2></h2>UglifyJS kann eine Quellzuordnungsdatei generieren, die Ihnen beim Debuggen des komprimierten JS-Codes sehr hilfreich ist. Übergeben Sie <p>, um die Sorcemap-Datei abzurufen (Sorcemap wird als <code>--source-map --output output.js</code> generiert). <code>output.js.map</code></p>Zusätzliche Optionen: <p></p><ul class=" list-paddingleft-2"><li><p> Geben Sie den Namen der Quellkarte an. <code>--source-map filename=<NAME></code></p></li><li><p> Übergeben Sie den Pfad einer Quelldatei. Andernfalls geht UglifyJS davon aus, dass HTTP <code>--source-map root=<URL></code> verwendet wurde, und lässt die <code>X-SourceMap</code>-Direktive weg. <code>//＃sourceMappingURL=</code></p></li><li><p> Geben Sie den Pfad zum Generieren der Quellkarte an. <code>--source-map url=<URL></code></p></li></ul>Zum Beispiel: <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">Nach dem Login kopieren</div></div></p>Die obige Konfiguration komprimiert und verschleiert <p>, <code>file1.js</code>, Ausgabedateien <code>file2.js</code> und Sourcemap <code>foo.min.js</code>, Sourcemap wird erstellt werden< Zuordnung von 🎜> und <code>foo.min.js.map</code>. (Tatsächlich ist das Stammverzeichnis der Quellkarte <code>http://foo.com/src/js/file1.js</code>, daher sind die entsprechenden Quelldateipfade <code>http://foo.com/src/js/file2.js</code>, <code>http://foo.com/src</code>) <code>js/file1.js</code><code>js/file2.js</code>Zugehörige Quellkarte</p><h3>Zusammengesetzte Quellkarte</h3><h3> Wenn Ihr JS-Code mit einem anderen Compiler (z. B. Coffeescript) generiert wird, ist die Zuordnung zum JS-Code nutzlos und Sie möchten auf jeden Fall eine Zuordnung zum CoffeeScript-Quellcode vornehmen. UglifyJS verfügt über eine Option zur Eingabe von Quellcode. Wenn Sie eine Zuordnung von CoffeeScript → Compiled JS haben, kann UglifyJS eine Zuordnung von CoffeeScript->Compressed JS zum Quellcodespeicherort generieren. </h3><p>Sie können </p> übergeben oder, um diese Funktion auszuprobieren, wenn die Quellkarte in js enthalten ist, schreiben Sie <p>. <code>--source-map content="/path/to/input/source.map"</code><code>--source-map content=inline</code>CLI-Mangle-Optionen</p><h2>CLI-Mangle-Optionen</h2><h2>Sie müssen </h2> (<p>) übergeben, um die Verschleierungsfunktion zu aktivieren. Die folgenden Optionen werden unterstützt (durch Kommas getrennt): <code>--mangle</code><code>-m</code></p><ul class=" list-paddingleft-2"><li><p></p> – im höchsten Bereich deklarierte Variablennamen verschleiern (standardmäßig deaktiviert) <p><code>toplevel</code> </p><p></p></li><li><p> – Variablennamen verschleiern, die im Bereich </p> oder <code>eval</code> erscheinen (standardmäßig deaktiviert) <code>eval</code><code>with</code><p></p> </li>Wenn die Verschleierung aktiviert ist und Sie verhindern möchten, dass einige Namen verschleiert werden, können Sie </ul> verwenden, um einige Namen zu deklarieren (durch Kommas getrennt). Zum Beispiel: <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">Nach dem Login kopieren</div></div><code>--mangle reserved</code> Dadurch wird verhindert, dass </p>, <p> und <code>require</code> verwechselt und geändert werden. <code>exports</code><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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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> – Optimieren Sie Urteile wie <code>if</code> und Bedingungsauswahl <br/></li><li><code>comparisons</code> – Optimieren Sie Operationen mit unvermeidlichen Ergebnissen in binäre Operationen wie <code>!(a <= b) → a > b</code> (nur wenn <code>unsafe_comps</code> ist). set Es wird nur wirksam); versuchen Sie es in „Keine Operation“ umzuwandeln. Zum Beispiel <code>a = !b && !c && !d && !e → a=!(b||c||d||e)</code><p></p></li><li><code>evaluate</code> – versuchen Sie, den konstanten Ausdruck auszuwerten. <br/></li><li><p></p><code>booleans</code> – optimieren Sie den Booleschen Wert Operationen, zum Beispiel <code>!!a? b : c → a ? b : c</code><br/></li><li><p></p><code>typeofs</code> – Standardmäßig <code>true</code> in <code>typeof foo == "undefined"</code> konvertieren oder niedriger, da dies der Fall ist. Bei unbekannten Fragen wird empfohlen, es auf <code>foo === void 0</code> zu setzen. <code>false</code><br/></li><li><p></p> – Wenn die Beurteilungsbedingungen der Schleifen <code>loops</code>, <code>do</code> und <code>while</code> bestimmt werden können, optimieren Sie sie. <code>for</code><br/></li><li><p></p> – Entfernen Sie nicht referenzierte Funktionen und Variablen. (Solange <code>unused</code> nicht festgelegt ist, wird eine einfache direkte Zuweisung einer Variablen nicht als Referenz gezählt.) <code>"keep_assign"</code><br/></li><li><p></p> – Töte Funktionen, auf die in nicht verwiesen wird der Gültigkeitsbereich der obersten Ebene (<code>toplevel</code>) und/oder Variablen (<code>"funcs"</code>) (der Standardwert ist <code>"vars"</code>, wenn <code>false</code> alle Funktionsvariablen gelöscht werden) <code>true</code><br/></li><li><p></p> - - Wenn <code>top_retain</code> festgelegt ist, behalten Sie bestimmte Funktionsvariablen im Bereich der obersten Ebene bei. (Kann als Array, durch Kommas getrennt oder mit regulären Ausdrücken oder Funktionen geschrieben werden. Siehe <code>unused</code>) <code>toplevel</code><br/></li><li><p></p> – Boost-Funktionsdeklaration <code>hoist_funs</code><br/></li><li><p></p> (Standard: false) – <code>hoist_vars</code>-Deklaration fördern (Standard ist <code>var</code>, da dadurch die Dateigröße erhöht wird) <code>false</code><br/></li> <li><p></p> -- if/return und if/continue optimieren<code>if_return</code><br/></li><li><p></p> -- Einfache Funktionen umschließen. <code>inline</code><br/></li><li><p></p> – aufeinanderfolgende <code>join_vars</code> Deklarationen zusammenführen <code>var</code><br/></li><li><p></p> – schwach optimierte kontinuierliche Deklaration wandeln Sie sofort <code>cascade</code> in <code>x, x</code>, <code>x</code> in <code>x = something(), x</code><code>x = something()</code><br/></li><li><p></p> um – wenn <code>collapse_vars</code> und <code>var</code> bei alleiniger Verwendung Versuchen Sie, <code>const</code><br/></li><li><p></p> zusammenzuführen, um die Situation zu optimieren, in der einige Variablen tatsächlich zugewiesen und als konstante Werte verwendet werden. <code>reduce_vars</code><br/></li><li><p></p> – Zeigt eine Warnung an, wenn nutzloser Code gelöscht wird. <code>warnings</code><br/></li><li><p></p> – Bei der Rückkehr Wenn der Wert einer sofort ausgeführten Funktion (IIFE) nicht mehr nützlich ist, brechen Sie ihn ab. Vermeiden Sie das Einfügen von Klammern durch den Codegenerator. <code>negate_iife</code><br/></li><li><p></p> – Standard ist <code>pure_getters</code>. Wenn Sie <code>false</code> übergeben, geht UglifyJS von einem Verweis auf eine Objekteigenschaft aus (z. B. <code>true</code> oder). <code>foo.bar</code> ) hat keine funktionellen Nebenwirkungen. <code>foo["bar"]</code><br/></li><li><p></p> – Standard <code>pure_funcs</code> Sie können ein Array von Namen übergeben und UglifyJS geht davon aus, dass diese Funktionen keine Funktionsnebeneffekte haben. **WARNUNG:** Wenn der Name im Gültigkeitsbereich neu definiert wird, wird er nicht erneut überprüft. Wenn beispielsweise <code>null</code> nicht auf die Variable <code>var q = Math.floor(a/b)</code> verwiesen wird, wird sie von UglifyJS gelöscht, <code>q</code> bleibt jedoch erhalten und niemand weiß, was sie tut. Sie können <code>Math.floor(a/b)</code> so festlegen, dass davon ausgegangen wird, dass die Funktion keine Funktionsnebenwirkungen hat und die gesamte Deklaration verworfen wird. In der aktuellen Implementierung erhöht dies den Overhead (die Komprimierung wird langsamer sein). <code>pure_funcs: [ 'Math.floor' ]</code><br/></li><li><p></p> – Die Standardeinstellung ist <code>drop_console</code>, wodurch die Funktion <code>false</code> beendet wird. Wenn Sie eine bestimmte Funktion wie <code>true</code> entfernen möchten und die Nebenwirkungen in ihren Parametern nach dem Löschen beibehalten möchten, verwenden Sie <code>console.*</code>, um damit umzugehen. <code>console.info</code><code>pure_funcs</code><br/></li><li><p> – Standard </p>. Übergeben Sie <code>expression</code>, um Abschlusswerte in Terminalanweisungen ohne „return“ beizubehalten. Zum Beispiel in Bookmarklets. <code>false</code><code>true</code><br/></li><li><p> – Standard </p>. Verhindert, dass der Kompressor nicht verwendete Funktionsargumente entfernt. Sie benötigen es, um bestimmte Funktionen zu schützen, die von <code>keep_fargs</code> abhängen. <code>true</code><code>Function.length</code><br/></li><li><p> – Standard </p>. Übergeben Sie <code>keep_fnames</code>, um zu verhindern, dass der Kompressor den Funktionsnamen beendet. Nützlich für Funktionen, die auf <code>false</code> basieren. Erweiterte Lektüre: <code>true</code>Verschleierungsoptionen.<code>Function.prototype.name</code><code>keep_fnames</code><br/></li><li><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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</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">Nach dem Login kopieren</div></div><p>相关文章：</p> <p><a href="//m.sbmmt.com/php-notebook-170781.html" target="_self">JS文件压缩成PNG图像存储方法 </a></p> <p><a href="//m.sbmmt.com/php-notebook-234709.html" target="_self">压缩文件解压器: 文件解压压缩 </a></p>

Das obige ist der detaillierte Inhalt vonJS-Dateien komprimieren und analysieren – die chinesische Dokumentation von UglifyJS3 erklärt ausführlich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!