sideeffects 字段用于声明模块是否有副作用，false 表示全无副作用，数组可指定有副作用的文件（如 css），true 或未声明则默认全有副作用，影响 tree shaking 效果。
在 JavaScript 的 Tree Shaking 过程中，package.json 中的 sideEffects 字段用于告诉打包工具（如 Webpack、Rollup、Vite）哪些模块**没有副作用**，从而安全地移除未使用的导出。
什么是 sideEffects？
副作用（side effect）指模块在被导入时，除了导出变量外，还执行了其他影响运行时的行为，比如：
- 修改全局变量或原型链（如
Array.prototype.map = ...） - 调用
require或import动态加载资源 - 发起网络请求、操作 DOM、设置定时器
- 直接执行有影响的代码（如立即执行函数 IIFE）
如果一个模块没有副作用，打包器才能放心地“摇掉”其中未被引用的导出（例如只用了 utils.js 中的 filter，没用 map，就可删掉 map 的定义）。
如何在 package.json 中声明 sideEffects
sideEffects 是一个布尔值或字符串数组，写在项目根目录的 package.json 中：
-
"sideEffects": false：表示整个包的所有模块都无副作用。这是最激进、Tree Shaking 效果最好的写法，适用于纯函数式工具库（如lodash-es的部分用法）。⚠️ 仅当确认所有模块都不含副作用时才用。 -
"sideEffects": ["*.css", "*.scss"]：表示只有匹配这些 glob 模式的文件有副作用（比如 CSS 导入会触发样式注入），其余 JS 文件默认无副作用。这是常见且推荐的做法，尤其适合组件库或带样式资源的包。 -
"sideEffects": ["./src/entry.js", "./styles/index.css"]：精确列出有副作用的入口文件路径（支持相对路径和 glob）。 -
"sideEffects": true（默认行为）：不声明该字段，或显式设为true，表示所有模块都有副作用，Tree Shaking 将被大幅限制（可能只对 ES 模块语法做基础分析）。
实际建议与注意事项
如果你是库作者或维护一个可被他人引入的 npm 包：
- 优先使用
"sideEffects": ["*.css", "*.scss", "*.less"]，覆盖样式资源；JS 文件若只做导出、无全局污染，就默认视为无副作用。 - 避免把有副作用的逻辑写在模块顶层（如
console.log('init')、localStorage.setItem），否则即使写了"sideEffects": false，也可能导致错误剔除或运行异常。 - 确保你的源码是 ESM（
export/import）格式，CommonJS（module.exports）不支持 Tree Shaking。 - Vite 和 Webpack 5+ 原生支持该字段；旧版 Webpack 需开启
optimization.sideEffects: true（默认已启用）。
一个典型示例
假设你开发了一个 UI 组件库，结构如下：
my-ui/ ├── package.json ├── index.js // 导出所有组件，同时 import './style.css' ├── style.css ├── Button.js // 纯导出，无副作用 └── utils/format.js // 纯函数，无副作用
对应 package.json 可写：
"sideEffects": ["./index.js", "./style.css"]
或者更稳妥地：
"sideEffects": ["*.css", "index.js"]
这样，用户只引入 import { Button } from 'my-ui' 时，utils/format.js 中未用到的函数就能被摇掉，style.css 仍会被保留（因为声明了有副作用）。
不复杂但容易忽略 —— 一行 sideEffects 声明，往往能显著减小最终包体积。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
