Javascript 导入lodash的正确方法

Correct way to import lodash

提问by Bill

I had a pull request feedback below, just wondering which way is the correct way to import lodash?

我在下面有一个 pull request 反馈，只是想知道导入 lodash 的正确方法是什么？

You'd better do import has from 'lodash/has'.. For the earlier version of lodash (v3) which by itself is pretty heavy, we should only import a specidic module/function rather than importing the whole lodash library. Not sure about the newer version (v4).

你最好使用 import has from 'lodash/has'.. 对于 lodash (v3) 的早期版本，它本身就很重，我们应该只导入一个特定的模块/函数，而不是导入整个 lodash 库。不确定新版本（v4）。

import has from 'lodash/has';

vs

对比

import { has } from 'lodash';

Thanks

谢谢

回答by Bill

import has from 'lodash/has';is better because lodash holds all it's functions in a single file, so rather than import the whole 'lodash' library at 100k, it's better to just import lodash's hasfunction which is maybe 2k.

import has from 'lodash/has';更好，因为 lodash 将它的所有函数保存在一个文件中，所以与其以 100k 的大小导入整个 'lodash' 库，最好只导入 lodash 的has函数，它可能是 2k。

回答by kimamula

If you are using webpack 4, the following code is tree shakable.

如果您使用的是webpack 4，以下代码是可摇树的。

import { has } from 'lodash-es';

The points to note;

注意事项；

1. 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).

2. 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).

3. 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.

1. CommonJS 模块是不可摇树的，所以你绝对应该使用lodash-es，它是作为 ES 模块导出的 Lodash 库，而不是lodash(CommonJS)。

2. lodash-es的 package.json contains "sideEffects": false，它通知 webpack 4 包内的所有文件都没有副作用（参见https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side -无效果）。

3. 此信息对于 treeShaking 至关重要，因为模块捆绑器不会对可能包含副作用的文件进行 treeshake，即使其导出的成员未在任何地方使用。

Edit

编辑

As of version 1.9.0, Parcel also supports "sideEffects": false, threrefore import { has } from 'lodash-es';is also tree shakable with Parcel. It also supports tree shaking CommonJS modules, though it is likely tree shaking of ES Modules is more efficient than CommonJS according to my experiment.

从 1.9.0 版本开始，Parcel 也支持"sideEffects": false，因此import { has } from 'lodash-es';也可以使用 Parcel 进行 tree shakable。它还支持摇树 CommonJS 模块，尽管根据我的实验，ES 模块的摇树可能比 CommonJS 更有效。

回答by Nikhil

Import specific methods inside of curly brackets

在大括号内导入特定方法

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

Pros:

优点：

• Only one import line(for a decent amount of functions)
• More readable usage: map() instead of _.map() later in the javascript code.

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

Cons:

缺点：

• Every time we want to use a new function or stop using another - it needs to be maintained and managed

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

回答by Charith Jayasanka

You can import them as

您可以将它们导入为

import {concat, filter, orderBy} from 'lodash';

or as

或作为

import concat from 'lodash/concat';
import orderBy from 'lodash/orderBy';
import filter from 'lodash/filter';

the second one is much optimized than the first because it only loads the needed modules

第二个比第一个优化得多，因为它只加载所需的模块

then use like this

然后像这样使用

pendingArray: concat(
                    orderBy(
                        filter(payload, obj => obj.flag),
                        ['flag'],
                        ['desc'],
                    ),
                    filter(payload, obj => !obj.flag),

回答by Orlando

If you are using babel, you should check out babel-plugin-lodash, it will cherry-pick the parts of lodash you are using for you, less hassle and a smaller bundle.

如果你使用 babel，你应该查看babel-plugin-lodash，它会挑选你正在使用的 lodash 部分，减少麻烦和更小的包。

It has a few limitations:

它有一些限制：

• You must use ES2015 imports to load Lodash
• Babel < 6 & Node.js < 4 aren't supported
• Chain sequences aren't supported. See this blog postfor alternatives.
• Modularized method packagesaren't supported

• 您必须使用 ES2015 导入来加载 Lodash
• 不支持 Babel < 6 和 Node.js < 4
• 不支持链序列。有关替代方案，请参阅此博客文章。
• 不支持模块化方法包