sideEffects 是 package.json 中用于声明模块副作用的字段，告诉打包工具哪些文件（如 *.css）必须保留，避免 Tree Shaking 误删；支持 false、true 和字符串数组三种配置，推荐使用数组精确列举含副作用的路径。
Tree Shaking 能生效，关键之一是正确配置 sideEffects 属性。它告诉打包工具（如 Webpack 或 Rollup）哪些模块“有副作用”，哪些可以安全地被移除。
sideEffects 是什么？
所谓“副作用”，是指模块执行时除了导出值以外的其他行为，比如：修改全局变量、调用 console、操作 DOM、发起请求、引入样式文件等。如果一个模块只有导出，没有其他操作，它就是“纯”的，可被 Tree Shaking 安全剔除。
sideEffects 就是用来显式声明项目中哪些文件或目录存在副作用，避免打包器误删。
如何配置 sideEffects 字段
该字段写在项目根目录的 package.json 中，支持三种写法：
立即学习“Java免费学习笔记（深入）”；
-
false：表示整个项目没有任何副作用，所有未引用的导出都可删除（最激进，适合纯函数库） -
true（默认值）：表示所有文件都有副作用，Tree Shaking 基本失效 -
字符串数组：只列出真正有副作用的文件路径（推荐方式），例如：
["*.css", "src/utils/polyfill.js"]
数组中支持 glob 模式："*.css"、"*.scss"、"src/init.js" 等。注意路径是相对于 package.json 的。
常见误配与修复建议
很多项目把 CSS 或字体文件放在 src 下但没声明副作用，导致样式丢失：
- 如果你用了
import './index.css'，但sideEffects没包含"*.css"，Webpack 可能把它删掉 - 第三方 UI 库（如 Ant Design）的样式导入也依赖此配置，不加就会白屏
- 不要写成
["src/**/*.css"]—— Webpack 当前版本不支持嵌套 glob，只认"*.css"或具体路径
验证配置是否生效
启用 Webpack 的 --display-used-exports 或查看生成的 bundle 分析报告（如 webpack-bundle-analyzer），观察未使用导出是否真的没被打包。也可以临时把某个工具函数从入口移除，看它是否还出现在最终代码里。
不复杂但容易忽略。配对了 sideEffects，Tree Shaking 才算真正跑起来。
