UglifyJS は ES2015 以降対応してなかった
- カテゴリ:
- JavaScript
- コメント数:
- Comments: 0
◆ transpile してから minify しないとダメみたい
◆ 一応 uglify-es というのが別ブランチであるけど 完璧なものじゃない
◆ メインのブランチと比べてあまり更新されてないし issue も受け付けてないよう
◆ 一応 uglify-es というのが別ブランチであるけど 完璧なものじゃない
◆ メインのブランチと比べてあまり更新されてないし issue も受け付けてないよう
UglifyJS が ES2015 対応してない
JavaScript の minify といえば一番は UglifyJS だと思います前に大きなファイル pdfjs を試したときはこういう結果でした
pdf.js (366.42KB)
--(ticker)--> 99.47KB
--(uglifyjs2)--> 144.44KB
--(closure-compiler)--> 150.49KB
pdf.worker.js (1.37MB)
--(uglifyjs2)--> 582.70KB
--(other)--> n/a
他のはある程度のサイズがあると動かなくなるようで使えるのは UglifyJS だけでした
今回使ってみると
SyntaxError: Unexpected token: keyword (const)
とエラーがでました
何度確認してもおかしくないですし 実行しても動きます
調べてみたら UglifyJS は ES2015 以降の機能は対応していないみたいです
オンラインで使えるページだと使えるので使えるものだと思ってました
このページが動いてる理由は オプションの項目から察するに実験版みたいな harmony ブランチで作られてる uglify-es というものが使われてるようです
https://github.com/mishoo/UglifyJS2/tree/harmony
試したかったもの
今回試したかったのはこのコードですfunction f(){
const b = () => 1
return b
}
console.log("b" === f().name)
minify したら直接 return で返しそうで関数名が取れないかな と
だけどそもそも対応してなかったです
一応 uglify-es というものが公開されてるので試してみると結果は
{ code: 'function f(){return()=>1}console.assert("b"===f().name);' }
const UglifyJS = require("uglify-es")
const code = `
function f(){
const b = () => 1
return b
}
console.log("b" === f().name)
`
const options = {
keep_fnames: true,
ecma: 8,
}
const minified_code = UglifyJS.minify(code, options).code
eval(code)
eval(minified_code)
true
false
結果が異なってます
一応 harmony ブランチがあるわけだし issue でも書いてみようかと NewIssue ボタンを押したら
Note: `uglify-js` only supports JavaScript.
Those wishing to minify ES6+ should transpile first.
とあって JavaScript のみ対応だから ES6 以降はトランスパイルしてね とテンプレート内で注意書きがありました
es の方の issue は受け付けてなさそうです
minify したいのに ES5 への変換してたら無駄なコード量増えると思うので es のほう頑張って欲しいのですけどね
ちなみに Babel 通すと
function f() {
var b = function b() {
return 1;
};
return b;
}
console.log("b" === f().name);
となって名前が付きました
これだと UglifyJS を通しても
function f(){return function b(){return 1}}console.log("b"===f().name);
になって名前が残ります
ただし keep_fnames オプションがないと関数名が維持されないのでおかしくなります