Lodash tree shaking问题：不同导入方式打包体积差异原因咨询

直接说结论：两种导入方式会不会引入全量 Lodash，根本不是写法本身决定的，要看你用的 Lodash 版本和打包配置，网上说「解构导入一定全量引入」的说法是片面的。

两种写法的实际表现 #

• 路径式单函数导入（写法参考import debounce from 'lodash/debounce'）
  这种写法是直接引用单个函数对应的独立文件，不管用的是普通 Lodash 还是 ES 版本的 Lodash，都只会打包你用到的函数代码，不会带多余内容，你测出来的14.7KB就是这种写法的正常结果。
• 对象解构导入（写法参考import { debounce } from 'lodash'）
  你测出来69.6KB是因为用了默认安装的普通版 Lodash包：普通 Lodash 是 CommonJS 规范的，而打包工具的 Tree Shaking 只对 ES 模块生效，没法静态分析 CommonJS 模块里哪些属性没用到，自然就把整个包都打进去了。
  如果你换成官方的 ES 模块版本lodash-es，同时开了生产环境的 Tree Shaking 优化，这种解构写法完全可以把未使用的函数摇掉，最终打包体积和单函数路径导入差不多。

可选优化方案 #

如果想用解构写法又不想全量引入，两种方法可选：

1. 把项目里的 Lodash 依赖替换成lodash-es，正常开启生产构建的优化开关即可
2. 继续用普通 Lodash，安装babel-plugin-lodash，插件会自动把你的解构导入转成单函数路径导入的形式，体积和手动写路径导入一致

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