Lodash是一个使用广泛的工具库，它提供了很多便利的方法用于操作数组，对象，字符串等等。

import _ from 'lodash';
import { debounce } from 'lodash'

然而，直接像上面这样引入lodash，会导致构建工具最后的构建产物体积暴增(大约增加72.5k)。

因为构建时构建工具将整个lodash库打包了进来，而非它其中被我们使用到的一部分。

下面四个方法，让我们能使用lodash的同时又不用担心构建产物体积变大。记得一定要在项目中使用!

从`lodash-es`引入（推荐）

import { debounce, throttle, padStart } from 'lodash-es';

比起lodash，lodash-es使用了ES module组织模块，构建工具构建时在做体积优化(tree shaking)的时候，通过对模块的依赖分析，能将lodash包中未使用到的模块都移除掉。

此种方法不需要像更改引入入口一样改变使用习惯，保留了ES module按名称引入的写法。

如果是一个新的项目，或没有使用babel编译源代码（用了swc, esbuild, tsc等等），那么lodash-es便是最佳选择。

对于已有项目，它需要修改业务代码。不过，这种修改只做简单的全局搜索替换即可完成。

使用babel插件做转换（推荐）

这种写法，不需要对业务代码进行任何修改，它的原理是在babel编译代码时，对引入lodash的语句进行替换，达到下文中更改引入入口的效果

插件的选择上，我们使用lodash官方提供的lodash/babel-plugin-lodash。然后修改项目的.babelrc，在plugin字段中加入这个插件

{
  "plugins": ["lodash"],
  "presets": [["@babel/env", { "targets": { "node": 6 } }]]
}

它会将这些代码

import _ from 'lodash'
import { add } from 'lodash/fp'

const addOne = add(1)
_.map([1, 2, 3], addOne)

在编译时转换成

import _add from 'lodash/fp/add'
import _map from 'lodash/map'

const addOne = _add(1)
_map([1, 2, 3], addOne)

这个例子来自于插件的官方文档。

如果你的项目中使用了babel编译，那么请毫不犹豫地引入插件做转换。

import debounce from 'lodash.debounce';

lodash在npm上同时也发布了以lodash.为前缀的包，他们将lodash的每个函数，单独作为一个包发布了出去。显然这些包只包含他们所用到功能的代码而非整个lodash。

当你正在写一个给外部使用的库，仅需要使用到lodash中的几个函数，那么这种方法会让库的使用者更快地安装依赖

lodash的package.json中，对于每个lodash中的函数，都通过exports字段，暴露了对应的入口，因此我们可以改变引入的方式

import debounce from 'lodash/debounce';

如此，在构建的时候仅会引入debounce函数相关的代码。这种方法手工的成分过大，对已有项目引入的优化需要变动到较多的代码，且无法使用全局替换完成。