开发模式下lodash与lodash-es打包体积差异的原因是什么？

虽然development模式默认不启用Tree-Shaking，但两者的体积差核心在于模块格式和内部代码结构的本质区别，具体拆解如下：

• 模块格式的处理逻辑不同
  lodash是CommonJS模块，这种模块的导出是动态的（比如通过module.exports = {...}动态挂载属性），webpack在开发模式下无法对其做静态分析，没办法判断你到底用到了哪些部分，只能把整个lodash包的代码全部打包进去。而lodash-es是ES模块（ESM），它的导出是静态的（export function xxx），哪怕不开Tree-Shaking，webpack也能通过静态分析精准定位到你import的具体函数，只打包该函数及其直接依赖的内部模块，不会把整个库都塞进去。

• 内部代码结构的差异
  lodash的CommonJS版本是把所有工具函数整合到一个大的导出对象中，整个包的代码是一个整体；而lodash-es是将每个工具函数拆分为独立的ESM文件，比如你用import { debounce } from 'lodash-es'，实际上只会引入lodash-es/debounce.js这个文件以及它依赖的少量内部辅助模块，代码量自然远小于整个lodash包。

• 开发模式的打包特性放大了差异
  开发模式下webpack不会做代码压缩，也会保留更多的代码注释、变量名等信息。lodash的CommonJS包本身体积就远大于单个lodash-es模块的体积，加上webpack对CommonJS无法做任何无用代码的剔除，最终打包体积达到554kb；而lodash-es因为只打包用到的小模块，哪怕不压缩，体积也只有5kb左右。

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