我有一个拉请求反馈下面,只是想知道哪种方式是导入lodash的正确方式?
你最好从'lodash/has'导入has ..对于早期版本 lodash (v3)本身就很重,我们应该只导入 一个特殊的模块/函数,而不是导入整个lodash 图书馆。不确定更新的版本(v4)。
import has from 'lodash/has';
vs
import { has } from 'lodash';
谢谢
我有一个拉请求反馈下面,只是想知道哪种方式是导入lodash的正确方式?
你最好从'lodash/has'导入has ..对于早期版本 lodash (v3)本身就很重,我们应该只导入 一个特殊的模块/函数,而不是导入整个lodash 图书馆。不确定更新的版本(v4)。
import has from 'lodash/has';
vs
import { has } from 'lodash';
谢谢
Import has from 'lodash/has';更好,因为lodash在一个文件中保存了它所有的函数,所以与其在100k导入整个'lodash'库,不如只导入lodash的has函数,它可能是2k。
如果你正在使用babel,你应该检查babel-plugin-lodash,它会挑选你正在使用的lodash的部分,更少的麻烦和更小的捆绑。
它有一些局限性:
你必须使用ES2015导入来加载Lodash 不支持Babel < 6 & Node.js < 4 不支持链序列。请参阅这篇博客文章以获得替代方案。 不支持模块化的方法包
如果你正在使用webpack 4,下面的代码是可摇树的。
import { has } from 'lodash-es';
注意事项;
CommonJS modules are not tree shakable so you should definitely use lodash-es, which is the Lodash library exported as ES Modules, rather than lodash (CommonJS). lodash-es's package.json contains "sideEffects": false, which notifies webpack 4 that all the files inside the package are side effect free (see https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free). This information is crucial for tree shaking since module bundlers do not tree shake files which possibly contain side effects even if their exported members are not used in anywhere.
Edit
从1.9.0版本开始,Parcel还支持"sideEffects": false,因此从'lodash-es'导入{has};也是摇树与包裹。 它还支持CommonJS模块的摇树,尽管根据我的实验,ES模块的摇树可能比CommonJS更有效。
导入花括号内的特定方法 从'lodash'导入{map, tail, times, uniq}; 优点: 只有一个导入行(用于相当数量的函数) 更可读的用法:map()而不是后面javascript代码中的_.map()。 缺点: 每当我们想要使用一个新功能或停止使用另一个功能时,它都需要维护和管理
摘自:导入Lodash库的正确方法——Alexander Chertkov写的一篇基准文章。
您可以导入它们为
import {concat, filter, orderBy} from 'lodash';
或者是
import concat from 'lodash/concat';
import orderBy from 'lodash/orderBy';
import filter from 'lodash/filter';
第二个比第一个优化得多,因为它只加载所需的模块
然后像这样使用
pendingArray: concat(
orderBy(
filter(payload, obj => obj.flag),
['flag'],
['desc'],
),
filter(payload, obj => !obj.flag),
我只是把它们放在自己的文件中,然后导出给node和webpack:
// lodash-cherries.js
module.exports = {
defaults: require('lodash/defaults'),
isNil: require('lodash/isNil'),
isObject: require('lodash/isObject'),
isArray: require('lodash/isArray'),
isFunction: require('lodash/isFunction'),
isInteger: require('lodash/isInteger'),
isBoolean: require('lodash/isBoolean'),
keys: require('lodash/keys'),
set: require('lodash/set'),
get: require('lodash/get'),
}
我认为这个答案可以很容易地用在任何项目中,用较少的努力带来最好的结果。
对于Typescript用户,使用如下方式:
// lodash.utils.ts
export { default as get } from 'lodash/get';
export { default as isEmpty } from 'lodash/isEmpty';
export { default as isNil } from 'lodash/isNil';
...
和导入lodash的使用方法相同:
//some-code.ts
import { get } from './path/to/lodash.utils'
export static function getSomething(thing: any): any {
return get(thing, 'someSubField', 'someDefaultValue')
}
或者如果你更喜欢保留_以避免冲突(例如,map from rxjs vs lodash)
//some-other-code.ts
import * as _ from './path/to/lodash.utils'
export static function getSomething(thing: any): any {
return _.get(thing, 'someSubField', 'someDefaultValue')
}
更新: 似乎正确的输出方式是:
export * as get from 'lodash/get';
export * as isEmpty from 'lodash/isEmpty';
export * as isNil from 'lodash/isNil';
...
但是@types/lodash有一个奇怪的碰撞,我已经删除了这个类型包,因为我会得到这个错误:
模块”/ . ./项目/ node_modules @types / lodash / cloneDeep”使用 'export ='不能与'export *'一起使用。ts(2498)
更新:
经过一番挖掘之后,我已经转换为tsconfig。json特性esModuleInterop为true,它允许我做以下事情:
import get from 'lodash/get';
import isEmpty from 'lodash/isEmpty';
import isNil from 'lodash/isNil';
...
export { get, isEmpty, isNil, ... };
注意,这将影响项目中定义为import * as lib from 'lib'的所有导入。遵循文档,以确保它适合你。
我认为更干净的进口lodash的方式是这样的:-
import _ from 'lodash'
然后你可以使用任何你想要的,只要使用下划线,就像这样:-
_.has()
对于那些想要继续使用_的人,那么就像这样导入它们:
import groupBy from 'lodash/groupBy';
import filter from 'lodash/filter';
import get from 'lodash/get';
window._ = {groupBy, filter, get};
从 'lodash' 导入 { cloneDeep, groupBy };
我认为这是更简单的时候,你不需要转换数组到lodash对象使用_。
const groupData = groupBy(expandedData, (x) => x.room.name);