Tree Shaking 能安全剔除未使用导出的前提是模块无副作用，sideEffects 字段用于白名单式声明真正有副作用的文件路径或 glob 模式，设为 false 或 [] 表示全包无副作用，推荐用字符串数组精确列出如 "./index.js"、"*.css" 等；路径须与实际 import 解析路径一致，否则会导致误删。
Tree Shaking 能安全剔除未使用的导出，前提是模块**没有副作用**。而 sideEffects 字段就是告诉打包工具（如 Webpack、Rollup）：“这个包/这些文件是否会产生副作用”。它不是用来“标记副作用”，而是**精确声明哪些文件 *确实有副作用*，其余默认无副作用**——这是实现精准摇树的关键。
sideEffects 字段的本质：白名单式声明
它的值是一个数组，列出所有**含有副作用的文件路径或 glob 模式**。不在列表中的文件，会被视为纯模块（pure），可被安全删除未使用代码。
-
设为
false：整个包完全无副作用，所有未引用的导出均可摇掉（最激进，也最安全，但需确保真实无副作用） -
设为
[]：等价于false，明确表示空白名单 -
设为字符串数组（推荐）：只列出真正有副作用的文件，例如：
"sideEffects": ["./src/index.js", "./dist/style.css", "*.scss"]
常见副作用场景与对应写法
副作用通常指：执行时会改变全局状态、注入样式、注册全局变量、触发网络请求等，而非仅导出函数/类。
Comprehensive Three.js 3D graphics reference
下载
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
-
CSS / 预处理器文件：引入即执行注入样式（如
import './index.scss'）
→ 写入"*.css"、"*.scss"或具体路径如"./styles/main.css" -
入口文件含副作用逻辑：如
index.js中直接调用setup()或修改window
→ 明确列出"./index.js"，避免它被误删 -
polyfill 或全局补丁：如
core-js/stable或自定义Array.prototype.xxx
→ 列出对应模块路径，如"./polyfills.js" - 字体、图片等资源（若 loader 触发副作用）：较少见，但若资源加载过程有运行时行为，也可列入
避坑要点：路径必须匹配实际导入路径
Webpack/Rollup 匹配的是你 import 语句中写的路径（解析后的真实路径），不是源码目录结构。
立即学习“Java免费学习笔记（深入）”；
- 如果你写
import 'my-lib/dist/index.css'，那sideEffects应包含"dist/index.css"，而非"src/index.css" - 使用别名（alias）时，按别名解析后的路径写；使用 exports 字段时，按最终解析到的文件路径写
- 路径支持 glob，但注意 Webpack v5+ 对
**支持有限，建议用"*.css"或明确子目录如"styles/**/*.css"
验证是否生效：看打包产物 + 启用 --display-modules
启用 Webpack 的 --display-modules 或分析工具（如 webpack-bundle-analyzer），观察：
- 未被
import的模块是否从产物中消失？ - 你声明为
sideEffects的 CSS 文件是否仍存在？即使没被 JS 引用，只要在 sideEffects 列表里，它就不会被摇掉 - 如果某 CSS 消失了，检查它是否漏写了路径，或 import 路径与 sideEffects 声明不一致
