更高效的ES6导入

Question

我在某处读到了（不幸的是，忘记了源代码），这样做更有效：

import _find from 'lodash/find';

相对于：

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

我知道导入单个函数可能会更有效率，但是效率/性能增益到底在哪里？ 它与webpack有关吗？ 如果我没有将webpack用作构建引擎，这有关系吗？

Answer 1

导入大型库时，您将导入整个对象（至少对于大多数捆绑器而言），因为没有明确的方法来区分导入对象和必需对象。

我对lodash不太熟悉，但它的切入点应如下所示：

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

使用第二种导入样式，您得到了整个对象，但是所有这些仅需要一个函数。

因此，如果您这样做：

import _ from 'lodash'

最后，您将把整个lodash库打包到您的捆绑包中，而如果这样做的话：

import find from 'lodash/find'

您将只有find及其依赖项，从而大大减小了包的大小。