更高效的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
}

使用第二种导入样式，您可以获得整个对象，但是您只需要1个函数。

所以，如果你这样做：

import _ from 'lodash'

如果您这样做，最终将整个lodash库打包到您的包中：

import find from 'lodash/find'

您将只拥有find及其依赖关系，从而导致捆绑规模相当小。