lodash与lodash-es包体积对比疑问：为何后者体积更大？

问题背景 #

• 项目使用常规lodash库，仅用到cloneDeep、isEmpty、get三个工具函数
• 原导入方式：import util from 'lodash/util'，未出现体积冗余
• 替换操作：改用lodash-es，导入方式为import { util } from 'lodash-es'
• 异常结果：lodash-es的包体积反而更大，对比截图：
  • lodash包体积截图
  • lodash-es包体积截图

原因分析 #

1. 导入方式错误，未触发tree-shaking
   你用import { util } from 'lodash-es'本质是导入了lodash-es整个util子模块的所有内容，而非只提取你需要的三个函数。原import util from 'lodash/util'作为CommonJS模块，打包工具可能做了基础优化，模块体积和实际使用的函数差异不大；但lodash-es作为ES模块，这种导入方式会让打包工具认为你需要整个模块，无法摇掉未使用的代码，导致体积膨胀。

2. 打包配置未适配tree-shaking要求
   如果你的打包工具（如webpack）未开启production模式，或package.json中未设置"sideEffects": false，即使是ES模块的lodash-es也无法被正确tree-shaking，最终还是会把整个模块打包进去。

解决方案 #

1. 改用单个函数的按需导入
   直接导入需要的函数，让tree-shaking真正生效：

   import cloneDeep from 'lodash-es/cloneDeep'
   import isEmpty from 'lodash-es/isEmpty'
   import get from 'lodash-es/get'
   

2. 优化打包配置

   • 确保webpack的mode设置为production，生产模式默认开启tree-shaking
   • 在项目根目录的package.json中添加："sideEffects": false，告知打包工具哪些模块可安全摇树

3. 重新打包验证
   按上述调整后重新打包，lodash-es的体积应该会比原lodash更小，因为仅包含实际用到的三个函数的代码。

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