导入单个lodash函数，而不是整个lodash项目

Question

我发现导入整个lodash库会占用相当多的磁盘空间：

$ du . | grep lodash
1696    ./lodash/fp
5000    ./lodash

在我的代码中，我只是在做

require('lodash');

我的package.json看起来就像这样：

"dependencies": {
   ...
   "lodash": "^4.6.1",
   ...
}

请注意，这仅适用于后端项目，不适用于web，如果这会有所不同的话。

所以我的问题是--最新的方法是只导入一小块lodash (就是我需要的功能)，而不导入整个该死的东西？

看起来这里有一些答案：

https://gist.github.com/callumlocke/bbfc524eaed6b3556dab

我的猜测是我应该在我的后端项目中使用dot语法：

"dependencies": {
   ...
   "lodash.X": "^4.6.1",
   ...
}

然后像这样导入它：

 require('lodash.X');

Answer 1

两种方式

有两种方法可以做到：

例如，require('lodash.head')

• You可以使用完整的包，例如require('lodash/head')

，

1. 。

require('lodash.head')

您可以使用单独的函数来安装软件包：

npm install --save lodash.head

这会将此代码添加到package.json：

"dependencies": {
  "lodash.head": "^4.0.1"
}

您可以将其与以下内容一起使用：

var head = require('lodash.head');

require('lodash/head')

您可以安装完整的lodash软件包：

npm install --save lodash

这会将此代码添加到package.json：

"dependencies": {
  "lodash": "^4.17.4"
}

您可以将其与以下内容一起使用：

var head = require('lodash/head');

更多示例

更复杂的示例：

您可以使用具有两个所需功能的_：

var head = require('lodash.head');
var tail = require('lodash.tail');
var _ = {pick, defaults};

效果相似，风格不同：

var _ = {
  head: require('lodash.head'),
  tail: require('lodash.tail'),
};

解释

如果你只想要lodash的一部分，比如lodash.pick，那么使用：

• https://www.npmjs.com/package/lodash.pick

有关打包为模块的单个函数的更多示例，请参阅：

• https://www.npmjs.com/browse/keyword/lodash-modularized

您也可以使用自定义构建，请参阅：

• https://lodash.com/custom-builds

当您使用完整的程序包并仅导入所需的函数时：

var _ = {
  head: require('lodash/head'),
  tail: require('lodash/tail'),
};

然后，像Webpack这样的一些工具可能能够优化您的构建，使其只包含您实际使用的代码。使用以下命令导入整个lodash时：

var _ = require('lodash');

然后，静态分析无法确定在运行时将使用哪个函数，因此很难很好地进行优化，而且通常构建中包含的代码比实际需要的要多。

Answer 2

使用ES6模块，这也可以像这样完成：

import isEqual from 'lodash.isequal';

Reference

Answer 3

正如在this answer中指出的，您可以使用lodash-es作为替代方案。而不是为您想要使用的每个单独的lodash函数运行npm install lodash ...。通过使用lodash-es，你只需要安装它一次，然后你就可以导入任何你想在代码中使用的lodash函数。

使用NPM安装lodash-es：

npm install lodash-es

为了导入特定的函数，isEqual说，

import { isEqual } from "lodash-es";

现在，您可以在代码中使用isEqual函数。

const a = {a: "a"};
const b = {b: "b"};

if (isEqual(a, b)) {
  //do something
}

尽管如此，这仅适用于您的后端项目。但是，仅供参考和其他可能在这里登陆的读者，webpack加上lodash-es可以将我的捆绑包大小从78 kb减少到18 kb，使用通用的lodash。