js 파일 압축 및 구문 분석 - UglifyJS3 중국어 문서에 자세히 설명되어 있습니다.-JS 튜토리얼-php.cn

<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를 호출하여 코드를 압축한다는 의미입니다. <code>html-webpack-plugin</code>과 같은 기능도 기본적으로 UglifyJS를 사용합니다. 그래서 실제로 자주 사용하지만 UglifyJS 자체가 복잡한 구성/옵션이 많고, 중국어 설명서가 없어 사용하는데 혼란스럽습니다. 이 글의 번역에 오류가 많은 점을 고려하여 정정해 주시기 바랍니다. <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>http://foo.com/src/js/file2.js</code>的映射。（实际上，sourcemap根目录是<code>http://foo.com/src</code>，所以相当于源文件路径是<code>js/file1.js</code>、<code>js/file2.js</code>）</p><h3>关联sourcemap</h3><h3>Composed source map</h3><p>假如你的JS代码是用其他编译器（例如coffeescript）生成的，那么映射到JS代码就没什么用了，你肯定希望映射到CoffeeScript源码。UglifyJS有一个选项可以输入sourcemap，假如你有一个从CoffeeScript → 编译后JS的map的话，UglifyJS可以生成一个从CoffeeScript->压缩后JS的map映射到源码位置。</p><p>你可以传入 <code>--source-map content="/path/to/input/source.map"</code>或来尝试此特性，如果sourcemap包含在js内，则写 <code>--source-map content=inline</code>。</p><h2>CLI混淆选项</h2><h2>CLI mangle options</h2><p>你需要传入<code>--mangle</code> (<code>-m</code>)来使启用混淆功能。支持以下选项（用逗号隔开）：</p><ul class=" list-paddingleft-2"><li><p></p><p><code>toplevel</code> — 混淆在最高作用域中声明的变量名（默认disabled）</p><p> </p></li><li><p></p><code>eval</code> - 混淆在<code>eval</code> 或 <code>with</code>作用域出现的变量名（默认disabled）<p></p></li></ul><p>当启用混淆功能时，如果你希望保留一些名字不被混淆，你可以用<code>--mangle reserved</code> 声明一些名字（用逗号隔开）。例如：</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><p>这样能防止<code>require</code>, <code>exports</code>和 <code>$</code></p>사전: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">로그인 후 복사</div></div>🎜다음은 텍스트입니다: 🎜<h1>UglifyJS 3</h1>🎜UglifyJS는 js 인터프리터, 최소화기, 압축기 또는 미화 도구 키트(파서, 축소기, 압축기 또는 미화 도구 키트)입니다. 🎜🎜참고: 🎜<ul class=" list-paddingleft-2"><li>🎜<strong><code>uglify-js@3</code> API 및 CLI가 단순화되었으며 더 이상 이전 버전과 호환되지 않습니다. <code >uglify-js@2</code></strong>.🎜</li><li>🎜<strong>UglifyJS <code>2.x</code> 문서는 여기에 있습니다</strong>.🎜</li ><li>🎜<code>uglify-js</code>는 ECMAScript 5(ES5)만 지원합니다.🎜</li><li>🎜ES2015+(ES6+) 코드를 압축하려면 <strong>uglify를 사용해야 합니다. -es</strong>이 <code>npm</code> 패키지입니다. 🎜</li></ul>🎜설치🎜🎜먼저 최신 node.js를 설치했는지 확인하세요(설치 후 컴퓨터를 다시 시작해야 할 수도 있습니다)🎜🎜NPM을 사용하여 CLI를 설치하세요. 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><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="contentsignin">로그인 후 복사</div></div>🎜NPM을 사용하여 프로그램 다운로드 사용법:🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">로그인 후 복사</div></div><h1>CLI 사용법</h1><h1>명령줄 사용법</h1><div class="code" style="position:relative; padding:0px; margin:0px;"><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="contentsignin">로그인 후 복사</div></div>🎜UglifyJS는 여러 파일을 입력할 수 있습니다. 먼저 입력 파일을 작성한 다음 옵션을 전달하는 것이 좋습니다. UglifyJS는 파일을 대기열에 넣고 압축 옵션에 따라 순차적으로 해석합니다. 모든 파일은 동일한 전역 도메인에 있습니다. 한 파일의 변수와 메소드가 다른 파일에서 참조되는 경우 UglifyJS는 이를 합리적으로 일치시킵니다. 🎜🎜파일이 지정되지 않으면 UglifyJS는 입력 문자열(STDIN)을 읽습니다. 🎜🎜파일 이름 앞에 옵션을 쓰려면 파일 이름이 옵션으로 간주되지 않도록 두 개 앞에 이중 하이픈을 추가하세요: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">로그인 후 복사</div></div><h3>CLI 옵션:</h3><h3> 명령줄 옵션</h3><div class="code" style="position:relative; padding:0px; margin:0px;"><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="contentsignin">로그인 후 복사</div></div>🎜파일을 명시적으로 출력하려면 <code>--output</code>(<code>-o</code>)을 지정하세요. 그렇지 않으면 터미널에 출력됩니다(STDOUT)🎜🎜 CLI 소스맵 옵션🎜 🎜CLI 소스맵 옵션🎜🎜UglifyJS는 압축된 JS 코드를 디버깅하는 데 매우 유용한 소스맵 파일을 생성할 수 있습니다. <code>--source-map --output output.js</code>를 전달하여 sorcemap 파일을 얻습니다(sorcemap은 <code>output.js.map</code>으로 생성됩니다). 🎜🎜추가 옵션: 🎜<ul class=" list-paddingleft-2"><li>🎜<code>--source-map filename=<NAME></code> 소스맵 이름을 지정합니다. 🎜</li><li>🎜<code>--source-map root=<URL></code> 소스 파일의 경로를 전달합니다. 그렇지 않으면 UglifyJS는 HTTP <code>X-SourceMap</code>이 사용되었다고 가정하고 <code>//#sourceMappingURL=</code> 지시문을 생략합니다. 🎜</li><li>🎜<code>--source-map url=<URL></code> 소스맵을 생성할 경로를 지정합니다. 🎜</li></ul>🎜예: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">로그인 후 복사</div></div>🎜위 구성은 <code>file1.js</code>, <code>file2.js</code>를 압축하고 난독화하고 <code>file2.js</code> 파일을 출력합니다. code>foo.min.js</code> 및 소스맵 <code>foo.min.js.map</code>, 소스맵은 <code>http://foo.com/src/js/file1.js<를 생성합니다. /code>, <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>)🎜<h3>연관된 소스 맵</h3><h3>구성된 소스 맵</h3>🎜JS 코드가 다른 컴파일러(예: 커피스크립트)에 의해 생성된 경우 JS에 매핑하세요. 코드는 쓸모가 없으므로 이를 CoffeeScript 소스 코드에 매핑하고 싶을 것입니다. UglifyJS에는 소스 맵을 입력하는 옵션이 있습니다. CoffeeScript → Compiled JS의 맵이 있는 경우 UglifyJS는 CoffeeScript->Compressed JS에서 소스 코드 위치까지의 맵을 생성할 수 있습니다. 🎜🎜<code>--source-map content="/path/to/input/source.map"</code>을 전달하거나 이 기능을 사용해 볼 수 있습니다. 소스맵이 js에 포함되어 있으면 <code>를 작성하세요. -소스맵 콘텐츠=인라인</code>. 🎜🎜CLI mangle 옵션🎜🎜CLI mangle 옵션🎜🎜난독화 기능을 활성화하려면 <code>--mangle</code>(<code>-m</code>)을 전달해야 합니다. 다음 옵션이 지원됩니다(쉼표로 구분): 🎜<ul class=" list-paddingleft-2"><li>🎜🎜🎜<code>toplevel</code> — 가장 높은 범위에 선언된 변수 이름을 난독화합니다(기본값은 비활성화됨) )🎜🎜 🎜</li><li>🎜🎜<code>eval</code> - <code>eval</code> 또는 <code>with</code> 범위에 나타나는 변수 이름을 난독화합니다(기본값은 비활성화됨)🎜🎜 </ li></ul>🎜난독화가 활성화된 경우 일부 이름이 난독화되는 것을 방지하려면 <code>--mangle Reserved</code>를 사용하여 일부 이름을 선언할 수 있습니다(쉼표로 구분). 예: 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><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="contentsignin">로그인 후 복사</div></div>🎜 이렇게 하면 <code>require</code>, <code>exports</code> 및 <code>$</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;"><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><div class="contentsignin">로그인 후 복사</div></div><p>混淆所有属性（除了JS内置的）:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><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="contentsignin">로그인 후 복사</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">로그인 후 복사</div></div><p>混淆除了 <code>reserved</code> （保留）外的所有属性:</p><div class="code" style="position:relative; padding:0px; margin:0px;"><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="contentsignin">로그인 후 복사</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">로그인 후 복사</div></div><p>混淆匹配<code>regex</code>（正则）的属性：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><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="contentsignin">로그인 후 복사</div></div><div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">로그인 후 복사</div></div><p>混用多个混淆属性选项：</p><div class="code" style="position:relative; padding:0px; margin:0px;"><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="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="//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>

위 내용은 js 파일 압축 및 구문 분석 - UglifyJS3 중국어 문서에 자세히 설명되어 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!