有没有办法从Babel获得较小的代码生成？

我看到一些不太理想的代码生成的情况是这样的：有没有办法从Babel获得较小的代码生成？

const selectedReddit = (state = 'reactjs', action) => { 
    console.log(state, action); 
}

它被改造成这样：

'use strict'; 
var selectedReddit = function selectedReddit() { 
    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'reactjs'; 
    var action = arguments[1]; 

    console.log(state, action); 
};

这是一个相当大的代码膨胀，当它可能已被：

'use strict'; 
function selectedReddit(state, action) { 
    state = state || 'reactjs'; 

    console.log(state, action); 
};

也许这与转换let有关，但这对于默认参数来说似乎是一个相当昂贵的转储。是否有一些可以应用于此输出的代码缩小，或者是否会产生较小代码的不同变换器？

需要119个字符时需要219个字符。这大约有45％的代码膨胀。

Playground example

@lonesomeday指出这不会为state === false但

'use strict'; 
function selectedReddit(state, action) { 
    state = (state === undefined) ? 'reactjs' : state; 

    console.log(state, action); 
};

哪@ 160个字节，这仅仅是一个26％的代码膨胀重达工作。

我不知道为什么var funcName = function funcName有人插入，为什么所有的参数变成参数[索引]。

在ES6中编写代码会很棒，但是这几乎是尖叫而已！如果你的代码将以这种方式被浏览器浏览。

来源

2017-01-28 boatcoder

它不可能是'state = state || 'reactjs';'因为原文会允许'false'，而这会取代它。这对你来说可能更好 - 但这不是ES6代码的含义。 – lonesomeday

所以，即使我纠正这一点，它仍然可能产生的代码26％的惩罚。 – boatcoder

我的猜测是，当涉及到包含其他参数时，它是最简单的编码方式，但我同意它效率不高。至于'var funcName = function funcName'，我想这是试图解决'Function.prototype.name'的问题。 – lonesomeday

有一些事情正在进行。请注意，这些通知是由你的建议和Babel生成的行为之间的某些实际差异支持的推测（与规范要求紧密匹配）;我不知道实际的动机。

原因var f = function f(){}而不是function f(){}是它避免了hoisting。这里没关系，但例如console.log(f); var f = function f(a) { return a; };不同于console.log(f); function f(a) { return a; }：第一个将打印undefined，第二个将打印该功能。
它需要在表达式中包含该函数的名称，因为它影响了ES6之前环境中的函数的.name属性（它早于函数名称推断）。在ES6环境中，const f = a => a; console.log(f.name);将打印'f';在ES6之前的环境中，var f = function(a) { return a; }; console.log(f.name);将打印''。
推测的原因它使用arguments而不是命名形式参数是，它会影响功能的.length属性：((a = 0, b) => {}).length === 0，而(function f(a, b){...}).length === 2。
正如在评论中指出的，state || 'reactjs'会给你reactjs当任何falsey值被指定，而不仅仅是undefined。
的arguments.length检查是必要的情况下，有人定义了Object.prototype的0属性：Object.prototype[0] = 'evil'; (function f(){return arguments[0] !== 'undefined' ? arguments[0] : 'default'; })()将返回'evil'而不是'default'。

Babel历史上生成的代码更接近您写的内容，早在6to5天。事实证明，一个编译器生成的代码只有，主要是在语义上与你写的相同是一个非常痛苦的编译器。

至于你的实际问题，Babel有es2015-loose预设，但它不会影响你写的代码。总的来说，生成正确的代码的值通常超过生成较短代码的值。

来源

2017-01-28 21:36:31 Bakkot

我已经回到现在主要使用ES5并反应功能组件。它被削减了约3.5-4K的过去是24K的代码丑化的代码（根据源地图 - 资源管理器）。我曾认为这将会是更大的代码，但并不期望16-20％的代码。我想暂时这将是我必须做的。强迫我回到ES5是一个很大的胜利，因为它让我看到有多少我的组件实际上可以是功能组件，甚至不需要createClass。 – boatcoder

有没有办法从Babel获得较小的代码生成？

回答

相关问题