导入单个 lodash 函数而不是整个 lodash 项目
Importing individual lodash functions instead of whole lodash project
我看到导入整个 lodash 库占用了相当多的 space 磁盘空间:
$ 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
我的猜测是我应该为我的后端项目使用点语法:
"dependencies": {
...
"lodash.X": "^4.6.1",
...
}
然后像这样导入它:
require('lodash.X');
两种方式
有两种方法可以做到:
- 您可以使用具有单独功能的包,例如
require('lodash.head')
- 您可以使用完整包,例如
require('lodash/head')
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 然后使用:
有关打包为模块的单个函数的更多示例,请参阅:
您也可以使用自定义构建,请参阅:
当您使用完整包并仅导入您需要的函数时:
var _ = {
head: require('lodash/head'),
tail: require('lodash/tail'),
};
然后像 Webpack 这样的一些工具可能能够优化您的构建以仅包含您实际使用的代码。当您导入整个 lodash 时:
var _ = require('lodash');
然后静态分析无法确定在运行时将使用哪个函数,因此很难优化好并且构建中包含的代码通常比实际需要的多。
使用 ES6 模块,也可以这样做:
import isEqual from 'lodash.isequal';
正如 中指出的那样,您可以使用 lodash-es
作为替代方法。而不是 运行 npm install lodash ...
你想要使用的每个 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
。
我看到导入整个 lodash 库占用了相当多的 space 磁盘空间:
$ 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
我的猜测是我应该为我的后端项目使用点语法:
"dependencies": {
...
"lodash.X": "^4.6.1",
...
}
然后像这样导入它:
require('lodash.X');
两种方式
有两种方法可以做到:
- 您可以使用具有单独功能的包,例如
require('lodash.head')
- 您可以使用完整包,例如
require('lodash/head')
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 然后使用:
有关打包为模块的单个函数的更多示例,请参阅:
您也可以使用自定义构建,请参阅:
当您使用完整包并仅导入您需要的函数时:
var _ = {
head: require('lodash/head'),
tail: require('lodash/tail'),
};
然后像 Webpack 这样的一些工具可能能够优化您的构建以仅包含您实际使用的代码。当您导入整个 lodash 时:
var _ = require('lodash');
然后静态分析无法确定在运行时将使用哪个函数,因此很难优化好并且构建中包含的代码通常比实际需要的多。
使用 ES6 模块,也可以这样做:
import isEqual from 'lodash.isequal';
正如 lodash-es
作为替代方法。而不是 运行 npm install lodash ...
你想要使用的每个 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
。