有沒有辦法從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獲得較小的代碼生成？

回答

相關問題