我在下面有一个 pull request 反馈,只是想知道导入 lodash 的正确方法是什么?
你最好使用 import has from 'lodash/has'.. 对于 lodash (v3) 的早期版本,它本身就很重,我们应该只导入一个特定的module/函数,而不是导入整个 lodash 库。不确定新版本(v4)。
import has from 'lodash/has';
对比
import { has } from 'lodash';
谢谢
我在下面有一个 pull request 反馈,只是想知道导入 lodash 的正确方法是什么?
你最好使用 import has from 'lodash/has'.. 对于 lodash (v3) 的早期版本,它本身就很重,我们应该只导入一个特定的module/函数,而不是导入整个 lodash 库。不确定新版本(v4)。
import has from 'lodash/has';
对比
import { has } from 'lodash';
谢谢
import has from 'lodash/has';
更好,因为 lodash 将它的所有函数保存在一个文件中,所以与其以 100k 的大小导入整个 'lodash' 库,最好只导入 lodash 的has
函数,它可能是 2k。
如果您使用的是webpack 4
,以下代码是可摇树的。
import { has } from 'lodash-es';
注意事项;
CommonJS module不可摇树,所以你绝对应该使用lodash-es
,它是作为 ES module导出的 Lodash 库,而不是lodash
(CommonJS)。
lodash-es
的 package.json contains "sideEffects": false
,它通知 webpack 4 包内的所有文件都没有副作用(参见https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side -无效果)。
此信息对于 treeShaking 至关重要,因为module捆绑器不会对可能包含副作用的文件进行 treeshake,即使其导出的成员未在任何地方使用。
编辑
从 1.9.0 版本开始,Parcel 也支持"sideEffects": false
,因此import { has } from 'lodash-es';
也可以使用 Parcel 进行 tree shakable。它还支持摇树 CommonJS module,尽管根据我的实验,ES module的摇树可能比 CommonJS 更有效。
在大括号内导入特定方法
import { map, tail, times, uniq } from 'lodash';
优点:
- 只有一个导入行(对于相当数量的功能)
- 更易读的用法:稍后在 javascript 代码中使用 map() 而不是 _.map() 。
缺点:
- 每次我们想要使用新功能或停止使用另一个功能时 - 都需要对其进行维护和管理
复制自:The Correct Way to Import Lodash Libraries - Alexander Chertkov 撰写的基准文章。
您可以将它们导入为
import {concat, filter, orderBy} from 'lodash';
或作为
import concat from 'lodash/concat';
import orderBy from 'lodash/orderBy';
import filter from 'lodash/filter';
第二个比第一个优化得多,因为它只加载所需的module
然后像这样使用
pendingArray: concat(
orderBy(
filter(payload, obj => obj.flag),
['flag'],
['desc'],
),
filter(payload, obj => !obj.flag),
如果你正在使用 babel,你应该查看babel-plugin-lodash,它会挑选你正在使用的 lodash 部分,减少麻烦和更小的包。
它有一些限制: