Webpack：默认对象导出是否影响未使用值的Tree Shaking？

好问题！这确实是很多开发者在使用ES模块和Tree Shaking时容易踩的坑，我来给你详细拆解：

先搞懂Tree Shaking的核心逻辑 #

Tree Shaking 能生效的关键，是Webpack对ES模块的静态分析能力——它需要在编译阶段就能明确知道哪些导出被实际引用，哪些完全没被用到，从而把未使用的代码从最终打包产物中移除。这种静态分析依赖ES模块的语法特性（比如import和export是静态声明，不能在运行时动态修改）。

你的两种写法对Tree Shaking的影响 #

1. 命名导出（推荐用于工具函数） #

像你第一种写法那样：

// utilities.js
export function someFunction(param){...}
export function someFunction2(param){...}

// someModule.js
import {someFunction} from "./utilities.js"

这种情况下，每个函数都是独立的命名导出，Webpack能精准追踪到someFunction被引用，而someFunction2完全没被用到，所以someFunction2会被Tree Shaking掉，打包产物里不会出现它的代码。

2. 默认对象导出（会破坏Tree Shaking） #

再看你第二种写法：

// styleUtilities.js
export function someFunction(param){...}
export function someFunction2(param){...}
export default {someFunction, someFunction2}

// someModule.js
import styleUtilities from "./styleUtilities"
const {someFunction} = styleUtilities

这里的问题在于：你把函数打包进了一个运行时创建的对象里作为默认导出。Webpack的静态分析无法确定这个对象的属性会不会在运行时被修改（比如动态添加/删除属性），所以它会认为整个默认导出的对象都被使用了，进而保留对象里的所有函数——哪怕你只用到了someFunction，someFunction2也会被打包进最终产物，Tree Shaking完全失效。

补充：压缩工具的“补救”？ #

有些同学会问：那如果开启了代码压缩（比如用Terser），会不会把未用到的函数删掉？
答案是：在极少数简单场景下可能会，但这不是Tree Shaking的功劳，而是压缩工具的深度死代码消除。这种优化的可靠性很低，一旦代码逻辑稍微复杂一点（比如对象属性被间接引用），压缩工具就无法识别，最终还是会保留冗余代码。

总结建议 #

如果你的核心需求是让Tree Shaking正常工作，优先使用命名导出，也就是你第一种写法的模式。只有当你确实需要把这些工具函数作为一个整体来传递（比如需要把整个工具集传给某个组件）时，再考虑默认对象导出，但此时要接受Tree Shaking失效的代价。

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