正确的方式导入lodash

Question

我在下面有一个拉取请求反馈,只是想知道哪种方式是导入lodash的正确方法？

你最好从'lodash/has'进行导入..对于早期版本的lodash(v3),它本身非常重,我们应该只导入一个specidic模块/函数而不是导入整个lodash库.不确定较新的版本(v4).

import has from 'lodash/has';

VS

import { has } from 'lodash';

谢谢

Answer 1

import has from 'lodash/has';更好,因为lodash将所有函数保存在一个文件中,所以不要导入整个'lodash'库100k,最好只导入lodash的has函数,可能是2k.

Answer 2

如果您使用的是webpack 4,则以下代码是树可动摇的.

import { has } from 'lodash-es';

需要注意的要点;

1. CommonJS模块不是树可动摇的,因此您一定要使用lodash-es,即作为ES模块导出的Lodash库,而不是lodash(CommonJS).

2. lodash-es的package.json包含"sideEffects": false,它通知webpack 4包中的所有文件都是无副作用的(参见https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side - 无效).

3. 此信息对树摇动至关重要,因为模块捆绑器不会出现树摇动文件,这些文件可能包含副作用,即使它们的导出成员不在任何地方使用.

编辑

从版本1.9.0开始,Parcel也支持"sideEffects": false,因此import { has } from 'lodash-es';也可以使用Parcel进行树形抖动.它也支持树摇动CommonJS模块,但根据我的实验,ES模块的树摇动可能比CommonJS更有效.

Answer 3

在大括号内导入特定方法

import { map, tail, times, uniq } from 'lodash';

优点：

• 只有一个导入行（对于相当数量的功能）
• 更易读的用法：稍后在 javascript 代码中使用 map() 而不是 _.map() 。

缺点：

• 每次我们想要使用新功能或停止使用另一个功能时 - 都需要对其进行维护和管理

复制自：The Correct Way to Import Lodash Libraries - Alexander Chertkov 撰写的一篇基准文章。

Answer 4

您可以将它们导入为

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),