Lodash ES6导入疑问：为何仅导入部分函数却似导入全部？

嘿，这个问题我之前踩过坑！其实核心原因是你当前的导入方式并没有实现真正的按需加载，具体来说：

• 你导入的是完整的Lodash打包文件：../npm_components/node_modules/lodash/lodash，这个文件是Lodash的全量版本，包含了所有函数的代码。当你用import { delay, each } from '全量文件路径'这种解构语法时，打包工具（比如Webpack）会把整个全量文件都打包进去——不管你解构了多少个函数，本质上都是加载了整个库，所以文件大小自然没变化。

那怎么解决这个问题，实现真正的按需加载呢？给你几个实用方案：

方案1：单独导入每个函数的独立模块 #

Lodash的每个函数都有单独的模块文件，你可以直接导入单个函数对应的文件，比如：

import each from '../npm_components/node_modules/lodash/each';
import delay from '../npm_components/node_modules/lodash/delay';
import find from '../npm_components/node_modules/lodash/find';
// 其他函数同理

这种方式下，打包工具只会把你实际导入的那些单独模块打包进去，文件体积会随着你导入的函数数量增加而合理增长。

方案2：使用lodash-es版本支持Tree Shaking #

lodash-es是Lodash的ES模块版本，天生支持Tree Shaking（打包工具自动剔除未使用代码的特性）。你可以直接这样导入：

import { each, find, delay } from 'lodash-es';

只要你的打包工具（Webpack、Rollup等）开启了Tree Shaking配置（通常生产环境默认开启），就只会把你用到的函数代码打包进去，多余的代码会被自动移除。

方案3：借助Babel插件实现按需打包 #

如果你习惯用import { xxx } from 'lodash'的写法，可以配置babel-plugin-lodash插件，配合Babel来实现按需打包。步骤大概是：

1. 安装插件：npm install babel-plugin-lodash --save-dev
2. 在Babel配置文件（比如.babelrc）中添加插件：

{
  "plugins": ["lodash"]
}

这样配置后，你原来的导入写法就会被自动转换成单个函数的导入，从而实现按需打包。

最后可以用打包分析工具（比如webpack-bundle-analyzer）验证一下，看看打包后的bundle里是不是只包含了你用到的Lodash函数代码~

内容的提问来源于stack exchange，提问作者Luca Reghellin