素晴らしいコミュニティ モジュール
  1. 表紙
  2. コミュニティ モジュール
  3. 醜いJS 3

醜いJS 3

UglifyJS は、JavaScript パーサー、縮小化、圧縮、美化ツールキットです。

ノート：

  • uglify-js@3には、 との下位互換性がない簡素化されたAPIとCLIがありますuglify-js@2。
  • UglifyJS リリースのドキュメントは、ここに2.xあります。
  • uglify-jsJavaScript (ECMAScript 5) のみをサポートします。
  • ECMAScript 2015 以降を縮小するには、Babelなどのツールを使用してトランスパイルします。

インストール

まず、最新バージョンのnode.jsがインストールされていることを確認します (この手順の後でコンピューターを再起動する必要がある場合があります)。

コマンド ライン アプリとして使用する NPM から:

1
npm install uglify-js -g

プログラムで使用するための NPM から:

1
npm install uglify-js

コマンドラインの使用法

1
uglifyjs [input files] [options]

UglifyJS は複数の入力ファイルを受け取ることができます. 最初に入力ファイルを渡し、次にオプションを渡すことをお勧めします. UglifyJS は入力ファイルを順番に解析し、圧縮オプションを適用します. ファイルは同じグローバル スコープ、つまり参照で解析されますファイルから別のファイルで宣言された変数/関数への変換は、適切に一致します。

入力ファイルが指定されていない場合、UglifyJS は STDIN から読み取ります。

入力ファイルの前にオプションを渡したい場合は、入力ファイルがオプションの引数として使用されないように、2 つを二重ダッシュで区切ります。

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

Command line options

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
    -h, --help                  Print usage information.
                                `--help options` for details on available options.
    -V, --version               Print version number.
    -p, --parse <options>       Specify parser options:
                                `acorn`  Use Acorn for parsing.
                                `bare_returns`  Allow return outside of functions.
                                                Useful when minifying CommonJS
                                                modules and Userscripts that may
                                                be anonymous function wrapped (IIFE)
                                                by the .user.js engine `caller`.
                                `expression`  Parse a single expression, rather than
                                              a program (for parsing JSON).
                                `spidermonkey`  Assume input files are SpiderMonkey
                                                AST format (as JSON).
    -c, --compress [options]    Enable compressor/specify compressor options:
                                `pure_funcs`  List of functions that can be safely
                                              removed when their return values are
                                              not used.
    -m, --mangle [options]      Mangle names/specify mangler options:
                                `reserved`  List of names that should not be mangled.
    --mangle-props [options]    Mangle properties/specify mangler options:
                                `builtins`  Mangle property names that overlaps
                                            with standard JavaScript globals.
                                `debug`  Add debug prefix and suffix.
                                `domprops`  Mangle property names that overlaps
                                            with DOM properties.
                                `keep_quoted`  Only mangle unquoted properties.
                                `regex`  Only mangle matched property names.
                                `reserved`  List of names that should not be mangled.
    -b, --beautify [options]    Beautify output/specify output options:
                                `beautify`  Enabled with `--beautify` by default.
                                `preamble`  Preamble to prepend to the output. You
                                            can use this to insert a comment, for
                                            example for licensing information.
                                            This will not be parsed, but the source
                                            map will adjust for its presence.
                                `quote_style`  Quote style:
                                               0 - auto
                                               1 - single
                                               2 - double
                                               3 - original
                                `wrap_iife`  Wrap IIFEs in parenthesis. Note: you may
                                             want to disable `negate_iife` under
                                             compressor options.
    -o, --output <file>         Output file path (default STDOUT). Specify `ast` or
                                `spidermonkey` to write UglifyJS or SpiderMonkey AST
                                as JSON to STDOUT respectively.
    --comments [filter]         Preserve copyright comments in the output. By
                                default this works like Google Closure, keeping
                                JSDoc-style comments that contain "@license" or
                                "@preserve". You can optionally pass one of the
                                following arguments to this flag:
                                - "all" to keep all comments
                                - a valid JS RegExp like `/foo/` or `/^!/` to
                                keep only matching comments.
                                Note that currently not *all* comments can be
                                kept when compression is on, because of dead
                                code removal or cascading statements into
                                sequences.
    --config-file <file>        Read `minify()` options from JSON file.
    -d, --define <expr>[=value] Global definitions.
    --ie8                       Support non-standard Internet Explorer 8.
                                Equivalent to setting `ie8: true` in `minify()`
                                for `compress`, `mangle` and `output` options.
                                By default UglifyJS will not try to be IE-proof.
    --keep-fnames               Do not mangle/drop function names.  Useful for
                                code relying on Function.prototype.name.
    --name-cache <file>         File to hold mangled name mappings.
    --self                      Build UglifyJS as a library (implies --wrap UglifyJS)
    --source-map [options]      Enable source map/specify source map options:
                                `base`  Path to compute relative paths from input files.
                                `content`  Input source map, useful if you're compressing
                                           JS that was generated from some other original
                                           code. Specify "inline" if the source map is
                                           included within the sources.
                                `filename`  Name and/or location of the output source.
                                `includeSources`  Pass this flag if you want to include
                                                  the content of source files in the
                                                  source map as sourcesContent property.
                                `root`  Path to the original source to be included in
                                        the source map.
                                `url`  If specified, path to the source map to append in
                                       `//# sourceMappingURL`.
    --timings                   Display operations run time on STDERR.
    --toplevel                  Compress and/or mangle variables in top level scope.
    --verbose                   Print diagnostic messages.
    --warn                      Print warning messages.
    --wrap <name>               Embed everything in a big function, making the
                                “exports” and “global” variables available. You
                                need to pass an argument to this option to
                                specify the name that your module will take
                                when included in, say, a browser.

--output( )を指定して-o、出力ファイルを宣言します。それ以外の場合、出力は STDOUT に送られます。

CLI ソース マップ オプション

UglifyJS は、圧縮された JavaScript のデバッグに非常に役立つソース マップ ファイルを生成できます。ソース マップを取得するには、 を渡します --source-map --output output.js(ソース マップは に書き出されます output.js.map)。

追加オプション：

  • --source-map "filename='<NAME>'"ソースマップの名前を指定します。

  • --source-map "root='<URL>'"元のファイルが見つかる URL を渡します。

  • --source-map "url='<URL>'"ソース マップが見つかる URL を指定します。それ以外の場合、UglifyJS は HTTPX-SourceMapが使用されていると想定し、ディレクティブを省略します //# sourceMappingURL=。

例えば：

1
2
3
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'"

The above will compress and mangle file1.jsand file2.js, will drop the output in foo.min.jsand the source map in . ソース マッピングはand foo.min.js.mapを参照します(実際には ソース マップ ルートとしてリストされ、元のファイルはand としてリストされます)。http://foo.com/src/js/file1.jshttp://foo.com/src/js/file2.jshttp://foo.com/srcjs/file1.jsjs/file2.js

Composed source map

CoffeeScript などのコンパイラによって出力された JS コードを圧縮する場合、JS コードへのマッピングはあまり役に立ちません. 代わりに、元のコード (つまり、CoffeeScript) にマップし直します. UglifyJS には、入力ソース マップを取得するオプション. CoffeeScript → コンパイル済み JS からのマッピングがあると仮定すると、UglifyJS は、コンパイル済み JS のすべてのトークンを元の場所にマッピングすることにより、CoffeeScript → 圧縮された JS からマップを生成できます。

この機能パスを使用するには--source-map "content='/path/to/input/source.map'" 、または--source-map "content=inline"ソース マップがソースとインラインで含まれている場合。

CLI 圧縮オプション

コンプレッサーを有効にするには--compress( )を渡す必要があります。必要に応じて、圧縮オプションのコンマ区切りリストを渡すことができます。-c

オプションはfoo=bar、または単にfoo(後者は、設定したいブール値のオプションを意味しますtrue。これは実質的に のショートカットですfoo=true)。

例：

1
uglifyjs file.js -c toplevel,sequences=false

CLIマングルオプション

To enable the mangler you need to pass --mangle( -m). 次の (カンマ区切り) オプションがサポートされています:

  • toplevel(デフォルトfalse) -- 最上位スコープで宣言されたマングル名。

  • eval(デフォルト) --または が使用されているfalseスコープで表示されるマングル名。evalwith

マングリングが有効になっているが、特定の名前がマングルされるのを防ぎたい場合は、それらの名前を次のように宣言できます--mangle reserved—カンマで区切られた名前のリストを渡します. 例:

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

require、exportsおよび名前が変更されないようにします$。

CLIマングリングプロパティ名 ( --mangle-props)

注:これはコードを壊す可能性があります. プロパティ名のマングリングは変数名のマングリングとは別のステップです. パスして --mangle-props有効にします. ビルトイン DOM プロパティとコア JavaScript のプロパティを除いて, 入力コードのすべてのプロパティをマングルします.例:

1
2
3
4
5
6
7
8
9
10
11
// 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());

すべてのプロパティをマングルします ( JavaScript を除くbuiltins):

1
$ uglifyjs example.js -c -m --mangle-props

1
var x={o:0,_:1,l:function(){return this._+this.o}};x.t=2,x.o=3,console.log(x.l());

プロパティを除くすべてのプロパティをマングルしますreserved。

1
$ uglifyjs example.js -c -m --mangle-props reserved=[foo_,bar_]

1
var x={o:0,foo_:1,_:function(){return this.foo_+this.o}};x.bar_=2,x.o=3,console.log(x._());

a に一致するすべてのプロパティをマングルしますregex。

1
$ uglifyjs example.js -c -m --mangle-props regex=/_$/

1
var x={o:0,_:1,calc:function(){return this._+this.o}};x.l=2,x.o=3,console.log(x.calc());

mangle プロパティ オプションの組み合わせ:

1
$ uglifyjs example.js -c -m --mangle-props regex=/_$/,reserved=[bar_]

1
var x={o:0,_:1,calc:function(){return this._+this.o}};x.bar_=2,x.o=3,console.log(x.calc());

これを有効にするために、デフォルトで標準の JS 名をマングリングする (--mangle-props builtinsオーバーライドする) ことは避けています。

tools/domprops.jsonさまざまなブラウザで定義されているほとんどの標準 JS および DOM プロパティをカバーする デフォルトの除外ファイルが提供されています。--mangle-props dompropsこの機能を無効にするには、 を渡します。

A regular expression can be used to define which property names should be mangled. たとえば、--mangle-props regex=/^_/アンダースコアで始まるプロパティ名のみをマングルします。

このオプションを使用して複数のファイルを圧縮する場合、最終的にそれらが一緒に機能するためには、1 つのプロパティがすべてのファイルで同じ名前にマングルされるようにする必要があります--name-cache filename.json 。このファイルは後で再利用できます. 最初は空である必要があります. 例:

1
2
3
$ 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

現在、マングルされたプロパティ名に関して、part1.jsと は互いに一貫しています。part2.js

UglifyJS への 1 回の呼び出しですべてのファイルを圧縮する場合、名前キャッシュを使用する必要はありません。

引用符で囲まれていない名前のマングリング ( --mangle-props keep_quoted)

引用符で囲まれたプロパティ名 ( o["foo"]) を使用すると、プロパティ名 ( foo) が予約されるため、引用符で囲まれていないスタイル ( ) で使用された場合でも、スクリプト全体で壊れることはありませんo.foo。

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

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

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

Debugging property name mangling

--mangle-props debugプロパティ名を完全に覆い隠すことなくプロパティ名をマングルするために渡すこともできます. たとえば, プロパティはこのオプションでマングルします. これにより, コードをデバッグし, マングリングが何かを壊している場所を特定しながら, 大きなコードベースのプロパティをマングルすることができますo.foo .o._$foo$_

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

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

You can also pass a custom suffix using --mangle-props debug=XYZ. This would then mangle o.footo o._$foo$XYZ_. You can change this every time you compile a script to identify how a property got mangled. 1 つの手法は、コンパイルごとに乱数を渡して、異なる入力 (たとえば、入力スクリプトを新しいプロパティで更新するとき) や、破損したキーをストレージに書き込むなどの間違いを特定するのに役立ちます。

API リファレンス

NPM 経由のインストールを想定すると、次のように UglifyJS をアプリケーションにロードできます。

1
var UglifyJS = require("uglify-js");

構成可能な方法ですべての縮小フェーズminify(code, options)を実行する単一の高レベル関数 があります. デフォルトでは、オプション および が有効になります. 例:minify()compressmangle

1
2
3
4
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}

minifyキーがファイル名で、値がソースコードである最初の引数にオブジェクトを使用することで、一度に複数の JavaScript ファイルを処理できます。

1
2
3
4
5
6
7
var code = {
    "file1.js": "function add(first, second) { return first + second; }",
    "file2.js": "console.log(add(1 + 2, 3 + 4));"
};
var result = UglifyJS.minify(code);
console.log(result.code);
// function add(d,n){return d+n}console.log(add(3,7));

オプションtoplevel:

1
2
3
4
5
6
7
8
var code = {
    "file1.js": "function add(first, second) { return first + second; }",
    "file2.js": "console.log(add(1 + 2, 3 + 4));"
};
var options = { toplevel: true };
var result = UglifyJS.minify(code, options);
console.log(result.code);
// console.log(3+7);

オプションnameCache:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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));

次の方法で、名前キャッシュをファイル システムに永続化できます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var cacheFileName = "/tmp/cache.json";
var options = {
    mangle: {
        properties: true,
    },
    nameCache: JSON.parse(fs.readFileSync(cacheFileName, "utf8"))
};
fs.writeFileSync("part1.js", UglifyJS.minify({
    "file1.js": fs.readFileSync("file1.js", "utf8"),
    "file2.js": fs.readFileSync("file2.js", "utf8")
}, options).code, "utf8");
fs.writeFileSync("part2.js", UglifyJS.minify({
    "file3.js": fs.readFileSync("file3.js", "utf8"),
    "file4.js": fs.readFileSync("file4.js", "utf8")
}, options).code, "utf8");
fs.writeFileSync(cacheFileName, JSON.stringify(options.nameCache), "utf8");

オプションの組み合わせの例minify():

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);"

警告を生成するには:

1
2
3
4
5
6
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}

エラーの例:

1
2
3
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}

注: とは異なりuglify-js@2.x、3.xAPI はエラーをスローしません。同様の効果を得るには、次のようにします。

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

縮小オプション

  • warnings(デフォルトfalse) — パスでtrueコンプレッサーの警告を返しますresult.warnings."verbose"より詳細な警告を表示するには、この値を使用します.

  • parse(デフォルト) — 追加の解析オプション{}を指定する場合は、オブジェクトを渡します。

  • compress(default {}) —false圧縮を完全にスキップするために渡します.オブジェクトを渡して、カスタムの圧縮オプションを指定します.

  • mangle(default true) — 渡してfalseマングル名をスキップするか、オブジェクトを渡してマングル オプションを指定します(以下を参照)。

    • mangle.properties(default false) — mangle オプションのサブカテゴリ. オブジェクトを渡して、カスタムmangle プロパティ optionsを指定します。

  • output(default ) — 追加の出力オプションnullを指定する場合はオブジェクトを渡します. デフォルトは最適な圧縮のために最適化されています.

  • sourceMap(デフォルト) -ソース マップ オプションをfalse指定する場合は、オブジェクトを渡します 。

  • toplevel(デフォルトfalse) -trueトップレベルの変数名と関数名のマングリングを有効にし、未使用の変数と関数を削除する場合は に設定します。

  • nameCache(デフォルト) -の複数回の呼び出しでマングルされた変数名とプロパティ名をキャッシュする場合は、null空のオブジェクト{}または以前に使用されたオブジェクトを渡します。注: これは読み取り/書き込みプロパティです。このオブジェクトの名前キャッシュ状態を読み取り、更新します縮小中に、ユーザーが再利用したり、外部で永続化したりできるようにします。nameCacheminify()minify()

  • ie8(デフォルトfalse) - trueIE8 をサポートするように設定されています。

  • keep_fnames(デフォルト: false) -true関数名の破棄またはマングリングを防ぐためのパス。 に依存するコードに役立ちますFunction.prototype.name。

オプション構造を縮小する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
    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,
    warnings: false,
}

Source map options

ソースマップを生成するには:

1
2
3
4
5
6
7
8
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

ソース マップはファイルに保存されず、 に返されるだけであることに注意してください result.map. に渡された値は、 に設定するためにsourceMap.urlのみ使用されます . の値は、 ソース マップ ファイルの属性 (仕様を参照)を設定するためにのみ使用されます.//# sourceMappingURL=out.js.mapresult.codefilenamefile

sourceMap.urlオプションを be に設定する"inline"と、ソース マップがコードに追加されます。

sourceRoot プロパティをソース マップに含めるように指定することもできます。

1
2
3
4
5
6
var result = UglifyJS.minify({"file1.js": "var a = function() {};"}, {
    sourceMap: {
        root: "http://example.com/src",
        url: "out.js.map"
    }
});

コンパイル済みの JavaScript を圧縮していて、そのソース マップがある場合は、次を使用できますsourceMap.content。

1
2
3
4
5
6
7
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`

代わりにヘッダーを使用している場合はX-SourceMap、省略できますsourceMap.url。

解析オプション

  • bare_returns(デフォルトfalse) -- トップレベルのreturnステートメントをサポート

  • html5_comments(デフォルトtrue)

  • shebang(デフォルトtrue) --#!command最初の行としてサポート

圧縮オプション

  • arguments(デフォルト: true) --arguments[index]可能な限り関数パラメータ名に置き換えます。

  • booleans(デフォルト: true) -- ブール コンテキストのさまざまな最適化。たとえば、!!a ? b : c → a ? b : c

  • collapse_vars(デフォルト: true) -- 副作用が許す限り、単一使用の非定数変数を折りたたみます。

  • comparisons(デフォルト: true) -- 特定の最適化をバイナリ ノードに適用します。たとえば!(a <= b) → a > b、バイナリ ノードを否定しようとする a = !b && !c && !d && !e → a=!(b||c||d||e)などです。

  • conditionals(デフォルト: true) -- if-s および条件式に最適化を適用します。

  • dead_code(デフォルト: true) -- 到達不能なコードを削除します

  • drop_console(デフォルト: false) --関数trueへの呼び出しを破棄するために 渡しますconsole.*。特定の関数呼び出しを破棄したい場合やconsole.info、関数呼び出しを破棄した後に関数引数からの副作用を保持したい場合は、pure_funcs代わりに使用します。

  • drop_debugger(デフォルト: true) --debugger;ステートメントを削除します

  • evaluate(デフォルト: true) -- 定数式の評価を試みます

  • expression(デフォルト: false) --ブックマークレットtrueなどで、 を使用しない端末ステートメントからの完了値を保持するために渡しますreturn。

  • global_defs(デフォルト: {}) --条件付きコンパイルを参照

  • hoist_funs(デフォルト: false) -- ホイスト関数の宣言

  • hoist_props(デフォルト: true) -- プロパティを定数オブジェクトおよび配列リテラルから通常の変数に巻き上げて、一連の制約に従います. 例: は に var o={p:1, q:2}; f(o.p, o.q);変換されますf(1, 2);. 注:有効で、オプションが 以上に設定され、オプションが有効であるhoist_props 場合に最適です。manglecompresspasses2compresstoplevel

  • hoist_vars(デフォルト: false) -- ホイストvar宣言 (false 一般的に出力のサイズが大きくなるように見えるため、これはデフォルトです)

  • if_return(デフォルト: true) -- if/return および if/continue の最適化

  • inline(デフォルト: true) -- simple/ ステートメントによる関数のインライン呼び出しreturn:

    • false- と同じ0
    • 0-- 無効化されたインライン化
    • 1-- インラインの単純な関数
    • 2-- 引数を持つインライン関数
    • 3-- 引数と変数を持つインライン関数
    • true- と同じ3

  • join_vars(デフォルト: true) -- 連続するvarステートメントを結合します

  • keep_fargs(デフォルト: true) -- コンプレッサーが未使用の関数引数を破棄しないようにします. に依存するコードにはこれが必要ですFunction.length.

  • keep_fnames(デフォルト: false) --trueコンプレッサが関数名を破棄するのを防ぐために渡します. に依存するコードに役立ちます Function.prototype.name. 参照: keep_fnames mangle オプション.

  • keep_infinity(デフォルト: false) -- Chrome でパフォーマンスの問題を引き起こす可能性がある に圧縮されるのをtrue防ぐために渡します。Infinity1/0

  • loops(デフォルト: true) -- の最適化do、whileおよびfor条件を静的に決定できる場合のループ。

  • negate_iife(デフォルト: true) -- コード ジェネレーターが挿入する括弧を避けるために、戻り値が破棄される「即時呼び出し関数式」を無効にします。

  • passes(デフォルト: 1) -- 圧縮を実行する最大回数. 場合によっては、1 回以上のパスでさらに圧縮されたコードが生成されます. パスが増えると時間がかかることに注意してください.

  • properties(デフォルト: true) -- たとえば、ドット表記を使用してプロパティ アクセスを書き換えます。foo["bar"] → foo.bar

  • pure_funcs(デフォルト: null) -- 名前の配列を渡すことができ、UglifyJS はそれらの関数が副作用を生成しないと想定します. 危険: 名前がスコープ内で再定義されているかどうかをチェックしません. ここでの例, 例えば .var q = Math.floor(a/b)変数qが他の場所で使用されていない場合、UglifyJS はそれをドロップしますが、Math.floor(a/b)それが何をするかはわかりません. を渡して、pure_funcs: [ 'Math.floor' ]この関数が副作用を生成しないことを知らせることができます.その場合、ステートメント全体が破棄されます.現在の実装では、いくらかのオーバーヘッドが追加されます (圧縮は遅くなります)マングリングを避けるために、下にあるシンボルpure_funcs も下にあることを確認してください。mangle.reserved

  • pure_getters(デフォルト: "strict") -- If you pass truefor this, UglifyJS will assume that object property access (eg foo.baror foo["bar"]) has no side Effects. がスローしないことが確実な場合のみ、副作用のないものとして "strict"扱うように指定します。または。foo.barfoonullundefined

  • reduce_funcs(デフォルト: true) -- 許可されている場合は、使い捨て関数を関数式としてインライン化して、さらに最適化できるようにします。デフォルトで有効です。オプションは有効かどうかによって異なります。reduce_vars このオプションを無効にすると、Chrome V8 エンジンで一部のコードがより高速に実行されます。そうではありません。他の主要なブラウザに悪影響を及ぼします。

  • reduce_vars(デフォルト: true) -- 定数値として割り当てられ、使用される変数の最適化を改善します。

  • sequences(デフォルト: true) -- コンマ演算子を使用して連続する単純なステートメントを結合します. 生成される連続するコンマ シーケンスの最大数を指定するために正の整数に設定できます. このオプションが に設定されている場合, デフォルトの制限は です. trueオプションをsequences設定200を無効falseにする0 . 最小の長sequencesさ は.2sequences1true20020

  • side_effects(デフォルト: true) -- false「pure」とマークされた潜在的に削除される関数を無効にするために渡します。関数呼び出しは、コメント注釈/*@__PURE__*/または/*#__PURE__*/呼び出しの直前にある場合、「pure」とマークされます。例:/*@__PURE__*/foo();

  • switches(デフォルト: true) -- 重複を排除し、到達不能なswitchブランチを削除します

  • toplevel(デフォルト: false) -- 参照されていない関数 ( "funcs") および/または変数 ( "vars") を最上位スコープで削除します (falseデフォルトでは、true参照されていない関数と変数の両方を削除します)。

  • top_retain(デフォルト: null) -- 特定のトップレベルの関数と変数がunused削除されないようにします (配列、カンマ区切り、正規表現、または function. Implies を指定できますtoplevel)。

  • typeofs(デフォルト: true) --typeof foo == "undefined"に 変換しますfoo === void 0。注:false既知の問題により、IE10 以前のバージョンではこの値を に設定することをお勧めします。

  • unsafe(デフォルト: false) -- 「安全でない」変換を適用します (以下で説明します)。

  • unsafe_comps(デフォルト: false) --a <= bどのオペランドも (強制的に) できないと仮定して、式を圧縮しますNaN。

  • unsafe_Function(デフォルト: false) -- との両方が文字列リテラルFunction(args, code) の場合、圧縮してマングルします。argscode

  • unsafe_math(デフォルト: ) -- into のfalseような数値式を最適化します 。浮動小数点の結果が不正確になる可能性があります。2 * x * 36 * x

  • unsafe_proto(デフォルト: false) -- Array.prototype.slice.call(a)intoのような式を最適化します[].slice.call(a)

  • unsafe_regexp(デフォルト: false) -- 変数が RegExp定数であるかのように、変数の値への置換を有効にします。

  • unsafe_undefined(デフォルト: false) --スコープ内にvoid 0名前が付けられた変数がある場合は置換しますundefined(変数名はマングルされ、通常は 1 文字に短縮されます)

  • unused(デフォルト: true) -- 参照されていない関数と変数をドロップします ( に設定されていない限り、単純な直接変数割り当ては参照としてカウントされません"keep_assign")

  • warnings(デフォルト: false) -- 到達不能なコードや未使用の宣言などを削除するときに警告を表示します。

マングルのオプション

  • eval(デフォルトfalse) --またはが使用されているtrueスコープで表示される mangle 名に渡します。evalwith

  • keep_fnames(デフォルトfalse) --true関数名をマングルしないように渡します. に依存するコードに役立ちますFunction.prototype.name. 参照:keep_fnames 圧縮オプション.

  • reserved(デフォルト[]) -- マングリングから除外する必要がある識別子の配列を渡します。例: ["foo", "bar"].

  • toplevel(デフォルトfalse) --true最上位スコープで宣言されたマングル名に渡します。

例:

1
2
3
4
5
// test.js
var globalVar;
function funcName(firstLongName, anotherLongName) {
    var myVariable = firstLongName +  anotherLongName;
}

1
2
3
4
5
6
7
8
9
10
var code = fs.readFileSync("test.js", "utf8");

UglifyJS.minify(code).code;
// 'function funcName(a,n){}var globalVar;'

UglifyJS.minify(code, { mangle: { reserved: ['firstLongName'] } }).code;
// 'function funcName(firstLongName,a){}var globalVar;'

UglifyJS.minify(code, { mangle: { toplevel: true } }).code;
// 'function n(n,a){}var a;'

Mangle properties options

  • builtins(デフォルト: false) --true組み込み DOM プロパティのマングリングを許可するために使用します。この設定をオーバーライドすることはお勧めしません。

  • debug(デフォルト: false) -- 元の名前がまだ存在するマングル名 空の文字列を渡して""有効にするか、空でない文字列を渡してデバッグ接尾辞を設定します。

  • keep_quoted(デフォルト: false) -- 引用符で囲まれていないプロパティ名のみをマングルします。

  • regex(デフォルト: null) -- 正規表現に一致するマングル プロパティ名のみに RegExp リテラルを渡します。

  • reserved(デフォルト: []) -- 配列にリストされているプロパティ名をマングルしません reserved。

出力オプション

コード ジェネレータは、デフォルトで可能な限り短いコードを出力しようとします. きれいな出力が必要な場合は、--beautify( を渡します-b). オプションで、コード出力を制御する追加の引数を渡すことができます:

  • ascii_only(デフォルトfalse) -- 文字列および正規表現内の Unicode 文字をエスケープします (ASCII 以外の文字が無効になるディレクティブに影響します)

  • beautify(default true) -- 実際に出力を美しくするかどうか. 渡すとこれが true に設定されますが、追加の引数を指定するために、縮小されたコードを生成する場合でも-b渡す必要がある場合があるため、を使用してオーバーライドできます。-b-b beautify=false

  • braces(デフォルトfalse) --本体が単一のステートメントであっても、常に、、、、ifまたはforステートメント に中かっこを挿入します。dowhilewith

  • comments(デフォルトfalse) --すべてのコメントを保持するにはtrueorを渡し、一部のコメント、正規表現文字列 (例: ) または関数を保持します。"all""some"/^!/

  • indent_level(デフォルト4)

  • indent_start(デフォルト0) -- すべての行の前にその数のスペースを追加します

  • inline_script(デフォルト) --文字列内trueの HTML コメントとスラッシュをエスケープします。</script>

  • keep_quoted_props(デフォルトfalse) -- オンにすると、オブジェクト リテラルのプロパティ名から引用符が削除されなくなります。

  • max_line_len(デフォルトfalse) -- 行の最大長 (醜いコードの場合)

  • preamble(デフォルトnull) -- when passed it must be a string and it will prepended to the outputliterally. The source map will adjust for this text. たとえば、ライセンス情報を含むコメントを挿入するために使用できます。

  • preserve_line(デフォルトfalse) --true行を保持するために渡しますが、 がbeautifyに設定されている場合にのみ機能しますfalse。

  • quote_keys(デフォルトfalse) --trueリテラル オブジェクト内のすべてのキーを引用するために渡します

  • quote_style(デフォルト0) -- 文字列の優先引用スタイル (引用されたプロパティ名とディレクティブにも影響します):

    • 0-- 二重引用符を優先し、文字列自体に複数の二重引用符がある場合は単一引用符に切り替えます0。
    • 1-- 常に一重引用符を使用します
    • 2-- 常に二重引用符を使用します
    • 3-- 常に元の引用を使用する

  • semicolons(default true) -- ステートメントをセミコロンで区切ります。渡すと、false可能な限りセミコロンの代わりに改行を使用し、醜いコードの出力をより読みやすくします (gzip の前のサイズは小さくなり、gzip の後のサイズは大幅に大きくなります)。

  • shebang(デフォルトtrue) --#!プリアンブルでシバンを保持 (bash スクリプト)

  • webkit(デフォルトfalse) -- WebKit バグの回避策を有効にします. PhantomJS ユーザーは、このオプションを に設定する必要がありますtrue.

  • width(デフォルト80) -- 美化がオンの場合にのみ有効です. これは、美化ツールが従おうとする (向きの) 線幅を指定します. これは、行テキスト (インデントを除く) の幅を指します. うまく機能しません.現在のところ、UglifyJS によって生成されたコードが読みやすくなります。

  • wrap_iife(デフォルトfalse) --trueすぐに呼び出される関数式をラップするために渡します。 詳細については、#640を参照してください。

その他

--comments出力に特定のコメントを保持するために渡すことができます. デフォルトでは、"@preserve"、"@license"、または "@cc_on" (IE の場合は条件付きコンパイル) を含む JSDoc スタイルのコメントが保持され ます--comments all。コメント、またはこの正規表現に一致するコメントのみを保持するための有効な JavaScript 正規表現. たとえば、--comments /^!/ のようなコメントが保持されます/*! Copyright Notice */。

ただし、コメントが失われる場合があることに注意してください。たとえば、次のようになります。

1
2
3
4
5
6
7
function f() {
    /** @preserve Foo Bar */
    function g() {
        // this function is never called
    }
    return something();
}

g「@preserve」があっても、内部関数(コメントが添付されている AST ノード) が参照されていないとしてコンプレッサーによって破棄されるため、コメントは失われます。

著作権情報 (または出力に保持する必要があるその他の情報) を配置する最も安全なコメントは、トップレベル ノードに添付されたコメントです。

オプションunsafe compress_

これは、特定の不自然なケースでコード ロジックを壊す可能性のある変換を有効にしますが、ほとんどのコードでは問題ないはずです.独自のコードで試してみると、縮小されたサイズが小さくなるはずです.このフラグがオンの場合は次のようになります:

  • new Array(1, 2, 3)またはArray(1, 2, 3)→[ 1, 2, 3 ]
  • new Object()→{}
  • String(exp)またはexp.toString()→"" + exp
  • new Object/RegExp/Function/Error/Array (...)→捨てますnew

Conditional compilation

--define( -d) スイッチを使用して、UglifyJS が定数であると想定するグローバル変数を宣言するために使用できます(--define DEBUG=falseスコープ内で定義されていない場合)。

1
2
3
if (DEBUG) {
    console.log("debug stuff");
}

の形式でネストされた定数を指定できます--define env.DEBUG=false。

UglifyJS は、条件が常に false であり、到達不能なコードをドロップすることについて警告します; 現在のところ、この特定の警告のみをオフにするオプションはありません。すべての警告をwarnings=falseオフにするために渡すことができます。

別のファイルでグローバルを定数として宣言し、それをビルドに含めることもできます。たとえば、 build/defines.js次のようなファイルを作成できます。

1
2
3
var DEBUG = false;
var PRODUCTION = true;
// etc.

次のようにコードをビルドします。

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

UglifyJS will notice the constants and, since they can't be changed, it will evaluate references to them to the value own and drop unreachable code as通常. 使用する場合、ビルドには宣言が含まれます. ES6 未満の環境をターゲットにしているconst場合with (デフォルトで有効)constを使用するだけで十分です。varreduce_vars

Conditional compilation API

global_defsYou can also use conditional compilation via the programmatic API. プロパティ名が圧縮プロパティであるという違いがあります。

1
2
3
4
5
6
7
8
var result = UglifyJS.minify(fs.readFileSync("input.js", "utf8"), {
    compress: {
        dead_code: true,
        global_defs: {
            DEBUG: false
        }
    }
});

識別子を任意の非定数式に置き換えるには、global_defsキーの前に を付けて"@"、値を式として解析するよう UglifyJS に指示する必要があります。

1
2
3
4
5
6
7
8
UglifyJS.minify("alert('hello');", {
    compress: {
        global_defs: {
            "@alert": "console.log"
        }
    }
}).code;
// returns: 'console.log("hello");'

それ以外の場合は、文字列リテラルとして置き換えられます。

1
2
3
4
5
6
7
8
UglifyJS.minify("alert('hello');", {
    compress: {
        global_defs: {
            "alert": "console.log"
        }
    }
}).code;
// returns: '"console.log"("hello");'

ネイティブの Uglify AST を使用するminify()

1
2
3
4
5
6
7
8
9
10
11
12
13
// example: parse only, produce native Uglify AST

var result = UglifyJS.minify(code, {
    parse: {},
    compress: false,
    mangle: false,
    output: {
        ast: true,
        code: false  // optional - faster if false
    }
});

// result.ast contains native Uglify AST

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// example: accept native Uglify AST input and then compress and mangle
//          to produce both code and native AST.

var result = UglifyJS.minify(ast, {
    compress: {},
    mangle: {},
    output: {
        ast: true,
        code: true  // optional - faster if false
    }
});

// result.ast contains native Uglify AST
// result.code contains the minified code in string form.

Working with Uglify AST

ネイティブ AST のトランスバーサルと変換は、それぞれ と を介して実行でき TreeWalkerます TreeTransformer 。

ESTree / SpiderMonkey AST

UglifyJS には独自の抽象構文ツリー形式があり、 実用的な理由 から、内部で SpiderMonkey AST を使用するように簡単に変更することはできませんが、UglifyJS には、SpiderMonkey AST をインポートできるコンバーターが用意されています。

たとえば、Acorn はSpiderMonkey AST を生成する超高速パーサーです. 1 つのファイルを解析し、AST を JSON 形式で標準出力にダンプする小さな CLI ユーティリティがあります. UglifyJS を使用してそれをマングルして圧縮するには:

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

この-p spidermonkeyオプションは、すべての入力ファイルが JavaScript ではなく、JSON の SpiderMonkey AST で記述された JS コードであることを UglifyJS に伝えます. したがって、この場合、独自のパーサーを使用せず、その AST を内部 AST に変換するだけです.

Use Acorn for parsing

さらに面白いことに、-p acornAcorn を使用してすべての解析を行うオプションを追加しました。このオプションを渡すと、UglifyJS はrequire("acorn").

Acorn は非常に高速ですが (たとえば、650K コードで 380ms ではなく 250ms)、Acorn が生成する SpiderMonkey ツリーの変換にはさらに 150ms かかるため、合計すると、UglifyJS 独自のパーサーを使用するだけでは不十分です。

Uglify Fast Minify Mode

あまり知られていませんが、ほとんどの JavaScript では、縮小されたコードのサイズ削減の 95% を空白の削除とシンボルのマングリングが占めています (精巧なコード変換ではありません) Uglify のビルドを 3 倍から 4 倍高速化するには、単純に無効にすることができcompressますmangle。モード Uglify のみが同等の縮小速度と gzip サイズを持っています butternut:

d3.js サイズを縮小 gzip サイズ 縮小時間 (秒)
オリジナル 451,131 108,733 -
uglify-js@3.0.24 mangle=false、compress=false 316,600 85,245 0.70
uglify-js@3.0.24 mangle=true、compress=false 220,216 72,730 1.13
バターナッツ@0.4.6 217,568 72,738 1.41
uglify-js@3.0.24 mangle=true、compress=true 212,511 71,560 3.36
バビリ@0.1.4 210,713 72,140 12.64

CLI から高速縮小モードを有効にするには、次を使用します。

1
uglifyjs file.js -m

API を使用して高速縮小モードを有効にするには:

1
UglifyJS.minify(code, { compress: false, mangle: true });

ソースマップとデバッグ

コードを単純化、再配置、インライン化、および削除するさまざまなcompress変換は、ソース マップを使用したデバッグに悪影響を与えることが知られています. これは、コードが最適化され、一部のコードが存在しないためにマッピングが不可能になることが多いためです. ソースの最高の忠実度のためにマップのデバッグは、Uglifycompressオプションを無効にして、単に使用しますmangle。

Compiler assumptions

より適切な最適化を可能にするために、コンパイラはさまざまな仮定を行います。

  • .toString()副作用がなく.valueOf()、組み込みオブジェクトの場合、オーバーライドされていません。
  • undefinedNaNであり、Infinity外部で再定義されていません。
  • arguments.callee、arguments.callerおよびFunction.prototype.caller使用されません。
  • このコードは、特に何かFunction.prototype.toString()の 内容を想定していません。Error.prototype.stack
  • プレーン オブジェクトのプロパティを取得および設定しても、他の副作用は発生しません (.watch()または を使用Proxy)。
  • オブジェクト プロパティは、追加、削除、および変更できます ( Object.defineProperty()、Object.defineProperties()、Object.freeze()、 Object.preventExtensions()またはで防止されませんObject.seal())。
© Copyright 2012-2021 fibjs.org |サポートしてください