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免费学习笔记（深入）”；
modern-javascript-patterns
下载
掌握 ES6+ 特性，包括 async/await、解构、扩展运算符、箭头函数、Promise、模块、迭代器、生成器以及函数式编程模式，编写简洁高效的 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")）。两者目标不同，可配合使用，但不可替代。
