导入依赖时的构建体积疑问：解构导入真的能缩小打包体积吗？

你观察到的体积差异是Lodash特有表现，不属于前端构建流程的通用运行逻辑，具体原因如下：

• 官方默认发布的lodash包采用CommonJS模块化规范，无法被构建工具的Tree Shaking能力静态分析，因此使用import { xxx } from 'lodash'的解构导入写法时，会将完整的Lodash包全部打入产物，导致体积远超预期。
• 采用import xxx from 'lodash/xxx'的子目录导入写法时，无论包的模块化规范是什么，都只会引入对应单个函数的代码文件，因此产物体积会小很多。
• 对于符合ESM规范、且在package.json中正确标记了sideEffects: false的第三方包，你最初的认知是成立的：仅导入所需函数的解构写法配合Tree Shaking，最终构建体积和单独导入对应文件的表现一致。

如果想要既用解构写法导入Lodash函数、又不想引入全量代码，可以改用官方提供的ESM版本lodash-es，该版本支持Tree Shaking，最终构建体积和子目录导入基本持平。

相关测试数据截图：

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