导入lodash的正确方法

IT技术 javascript lodash babeljs
2021-03-14 16:42:16

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

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

import has from 'lodash/has';

对比

import { has } from 'lodash';

谢谢

6个回答

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

@PDN webpack 2 摇树应该自动为你做
2021-04-27 16:42:16
@GeorgeKatsanos 你只需要导入你想使用的函数,你不需要'_'
2021-05-10 16:42:16
@GeorgeKatsanos'lodash/has'不是一个单独的包。has.js在常规'lodash'的根目录中有一个文件,并且import has from 'lodash/has'(或const has = require ('lodash/has)将加载该文件。还有在NPM单独的方法包,但他们使用的“点语法”: 'lodash.has'如果您不介意为您使用的每种方法安装一个单独的包(并可能因此使您变得package.json庞大),这也是一种有效的方法
2021-05-12 16:42:16
我必须在这里补充一点,如果您使用 webpack 2 或 rollup(支持摇树的捆绑器),那么import { has } from 'lodash'将以相同的方式工作,因为其余的将被剥离
2021-05-12 16:42:16
与其他一些人不同,我的摇树无法使用更明显的语法,只有在我切换到 lodash-es 并使用该import has from 'lodash-es/has'语法后,我才能获得完整的摇树。从 526KB 到 184KB,参见stackoverflow.com/questions/41991178/...
2021-05-15 16:42:16

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

import { has } from 'lodash-es';

注意事项;

  1. CommonJS module不可摇树,所以你绝对应该使用lodash-es,它是作为 ES module导出的 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 至关重要,因为module捆绑器不会对可能包含副作用的文件进行 treeshake,即使其导出的成员未在任何地方使用。

编辑

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

我没有使用 TypeScript 并且我的 .babelrc env 预设设置为modules: false所以它们不会转换为 CommonJS。我现在正在使用 Bruce 的解决方案,这似乎有效。感谢您的贡献,我确定它可以工作,但我只是没有设置。
2021-04-25 16:42:16
@IsaacPak 确保您没有将 ES module转换为 CommonJS。如果您使用的是 TypeScript,则必须将--module编译器选项设置es6,es2015esnext
2021-05-05 16:42:16
import has from 'lodash-es/has'并且import {has} from 'lodash-es'两种变体在使用时都会进行摇树webpack-4
2021-05-06 16:42:16
不幸的是,此时不能将 lodash-es 与 jest 一起使用:github.com/facebook/jest/issues/4842#issuecomment-491434065
2021-05-09 16:42:16
我将所有 lodash 导入转换为import { ... } from 'lodash-es'; 我的包仍然包含整个库。
2021-05-18 16:42:16

在大括号内导入特定方法

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

优点:

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

缺点:

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

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

这个答案似乎是从blazemeter.com/blog/...的简单复制和粘贴如果是这样,最好提供信用。
2021-04-24 16:42:16
感谢您提供有用的答案。但是,我喜欢_.map()明确说明正在使用外部库语法。import _ from 'lodash'因为你的建议同样有效或者是在那里能够使用这个语法的另一种方式?
2021-04-28 16:42:16
@ToivoSäwén 我完全同意并更喜欢显式_.map()语法。在进行 es6 导入和 tree-shaking 时,您是否能够找到一种方法来保持这种状态?
2021-05-05 16:42:16
import { map as _map, tail } from 'lodash'
2021-05-07 16:42:16

您可以将它们导入为

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 部分,减少麻烦和更小的包。

它有一些限制

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