sideEffects 是构建工具用于标识模块副作用的字段,避免 tree-shaking 错误移除影响环境的代码;支持 false、文件 glob、具体路径或 true 等声明形式,需谨慎配置以防功能缺失或样式丢失。

在 JavaScript 模块化中,sideEffects 是一个用于构建工具(如 Webpack、Rollup)的提示字段,告诉打包器哪些模块具有“副作用”,从而避免在摇树优化(tree-shaking)过程中被错误地移除。
什么是副作用(Side Effects)?
副作用指模块在被导入时,除了导出变量/函数外,还会执行一些影响外部环境的操作,例如:
- 修改全局变量或原型链(如
Array.prototype.myMethod = ...) - 向 DOM 添加节点、监听事件或触发样式计算
- 发起网络请求、设置定时器、写入 localStorage
- 调用 console 或 alert 等产生可观测行为的 API
这类代码不能被单纯依据“是否被 import 引用”来判断是否可删除——即使某个模块没被显式使用,只要它有副作用,就必须保留执行。
如何声明 sideEffects?
在项目的 package.json 中添加 sideEffects 字段,支持以下几种形式:
立即学习“Java免费学习笔记(深入)”;
-
"sideEffects": false:表示整个包无副作用,所有未引用的导出均可安全剔除(最激进,适合纯函数式工具库) -
"sideEffects": ["*.css", "*.scss"]:仅声明特定文件类型有副作用(常见于样式文件需强制引入) -
"sideEffects": ["./src/polyfill.js", "./src/init.js"]:精确列出有副作用的模块路径 -
"sideEffects": true(默认行为):不提供线索,构建工具保守处理,不进行深度 tree-shaking
注意:路径匹配基于项目根目录,且支持 glob 模式;若使用相对路径,需确保与实际导入路径一致。
常见误用与注意事项
声明不当会导致两种典型问题:
- 误标为 false:模块实际有副作用(如自动注册全局组件),却被剔除,运行时报错或功能缺失
-
漏标副作用文件:比如 CSS 文件未列入
sideEffects,而构建工具又启用了模块化 CSS 提取,则样式可能丢失 -
ESM 与 CJS 混用时失效:某些工具对 CommonJS 模块的副作用分析较弱,建议统一使用 ESM 并配合正确的
type: "module"
可通过构建后检查产物或启用 Webpack 的 stats: "verbose" 查看哪些模块被标记为“有副作用”。
与 /*#__PURE__*/ 注释的区别
sideEffects 是模块粒度的声明,作用于整个文件;而 /*#__PURE__*/ 是语句级提示,用于标记单个函数调用可被安全移除(如 /*#__PURE__*/console.log("test"))。两者目标不同,可配合使用,但不可替代。










