更高效ES6進口

2017-01-01 54 views 0 likes

我在其他地方見過（忘了來源，不幸），它的更有效莫名其妙地做到這一點：更高效ES6進口

import _find from 'lodash/find';

，而不是：

import _ from 'lodash'; // just to use _.find

我明白這怎麼可能導入單個函數的效率更高，但效率/性能增益究竟在哪裏？它是否與webpack相關？如果我沒有使用webpack作爲我的構建引擎，這有什麼關係嗎？

2017-01-01 ffxsam

是的，它是關於較小的模塊尺寸。無論是客戶的構建還是整體構建時間。 – Bergi

換句話說，當爲生產構建時，如果我通過第一種方法導入，它將只包含'find'的lodash代碼，對吧？這是一個webpack的東西，還是它一般適用於ES6？ – ffxsam

它適用於一般模塊，無論使用哪個模塊系統或模塊捆綁器。然而，即使您導入大型模塊，捆綁器也會自動刪除不需要的代碼;這個交易建立了構建時間的大小。 – Bergi

回答

當您導入一個大型庫時，導入整個事件（至少在大多數捆綁器中），因爲沒有明確的方法來區分需要導入的對象。

我不是太熟悉lodash但它的切入點應該是這個樣子：

module.exports = { 
    find: require('./find.js') 
    filter: require('./filter.js') 
    // rest of the exposed functions 
}

隨着你得到這個整個對象的第二進口的風格，但你只需要1個功能從所有這一切。

所以，如果你這樣做：

import _ from 'lodash'

你將最終擠進你的包全lodash庫，而如果你這樣做：

import find from 'lodash/find'

您只需find和它是依賴關係，導致一個相當小的包的大小。

2017-01-01 19:30:12

那麼怎麼樣：從'lodash'導入{find} –

@KenFehling如果您從es6包導入，那就沒關係。如果你從一個庫中導入，比如：lodash，它基本上還是先裝載整個東西，所以你最好在答案中選擇最後一個選項。 –

相關問題