webpack的usedExports与package.json的sideEffects是什么？二者有何差异？

一、optimization.usedExports 是什么？ #

这是Webpack服务于**Tree Shaking（死代码消除）**的核心配置之一：

• 开启usedExports: true后，Webpack会逐个分析每个模块的导出成员，标记出哪些导出在项目里被实际用到、哪些没被用到。
• 它只负责“标记”，不会直接删除代码——最终要靠TerserPlugin这类压缩插件，把那些标记为未使用的导出代码从打包产物里删掉。
• 举个实际例子：你写了个工具模块utils.js，导出了formatDate和randomNum，但项目里只用到了formatDate。开启usedExports后，Webpack会给randomNum打上标记，压缩阶段就会把这个没用的函数删掉。

二、package.json中的sideEffects 是什么？ #

这是给Webpack的一个“规则提示”，用来明确哪些文件/模块存在副作用：

• 所谓“副作用”，指模块执行时会对全局环境产生影响的操作——比如修改全局变量、给JS原生对象加原型方法、引入全局CSS样式（因为CSS加载后会影响页面样式），这类模块哪怕没有导出成员被使用，也不能随便删掉。
• 配置方式很灵活：
  • 设为"sideEffects": false：表示整个项目所有模块都无副作用，Webpack可以放心删除任何未被引用的模块。
  • 设为数组：比如"sideEffects": ["*.css", "./src/global-init.js"]，列出有副作用的文件路径，Webpack会保留这些文件，哪怕它们没被引用。
• 核心作用是帮Webpack判断：一个未被引用的模块，到底能不能安全地从打包产物里移除。

三、二者的核心区别 #

• 处理粒度不同：
  • usedExports聚焦模块内部细节——比如一个模块导出5个函数，它能找出其中2个没被用到的，标记后等待删除。
  • sideEffects聚焦整个模块的生死——如果模块没被引用且无副作用，直接整个模块不打包；如果有副作用，哪怕没被引用也得保留。
• 依赖工具不同：
  • usedExports本身不删代码，必须配合压缩工具（如Terser）才能真正移除冗余代码。
  • sideEffects是Webpack自身就能处理的逻辑，不需要依赖额外插件，直接决定模块是否被打包。
• 适用场景不同：
  • 想清理模块内部没用到的导出内容，用usedExports。
  • 要告知Webpack哪些模块不能随便删（比如全局样式、全局初始化脚本），或确认某些模块可安全删除，用sideEffects。

内容的提问来源于stack exchange，提问作者VYSHNAV RAJ S