javascript - 更高效的 ES6 导入

Question

我在某处读到(不幸的是忘记了来源)，这样做更有效:

import _find from 'lodash/find';

相对于:

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

我明白导入单个函数如何更有效，但是效率/性能增益到底在哪里？与webpack相关吗？如果我不使用 webpack 作为构建引擎，这有什么关系吗？

Answer 1

当您导入一个大库时，您会导入整个内容(至少对于大多数 bundler 而言)，因为没有明确的方法来区分您导入的对象中需要什么。

我对 lodash 不太熟悉，但它的入口点应该如下所示:

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

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

所以如果你这样做:

import _ from 'lodash'

您最终会将整个 lodash 库打包到您的 bundle 中，而如果您这样做:

import find from 'lodash/find'

您将只有 find 及其依赖项，从而导致包大小显着减小。