更高效ES6进口

2017-01-01 65 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，它基本上还是先装载整个东西，所以你最好在答案中选择最后一个选项。 –