sideeffects配置是tree shaking生效的关键前提，它明确声明哪些文件含副作用必须保留，否则打包工具会保守保留全部代码导致摇树失效；支持false（全纯净）、文件数组（精准标记副作用）和不配置（等价true，禁用摇树）三种方式。
Tree Shaking 要真正生效，sideEffects 配置是关键一环。它不是可选的“锦上添花”，而是告诉打包工具“哪些文件哪怕没被导入，也必须保留”的安全声明。
为什么必须配 sideEffects？
ES 模块本身支持静态分析，但构建工具无法自动判断一个文件是否“只是导出函数”还是“顺带执行了全局操作”。比如：
-
import './styles.css'—— 没导出任何东西，但注入了样式（副作用） -
import 'core-js/stable'—— 自动补丁浏览器 API（副作用） -
window.myLib = {...}在模块顶层执行（副作用）
如果不声明，Webpack 或 Rollup 会保守处理：宁可留着所有代码，也不冒险删掉有副作用的文件——结果就是 Tree Shaking 失效。
Java Development Manual
下载
Java开发手册规约集合，基于阿里巴巴Java开发手册（嵩山版）。 涵盖7大维度：编程规约、异常日志、单元测试、安全规约、MySQL数据库、工程结构、设计规约。 当用户需要：(1) 编写或审查Java代码 (2) 检查命名/代码规范 (3) 处理异常和日志 (4) 编写单元测试 (5) 安全编码 (6) 数据库设...
三种 sideEffects 写法及适用场景
在项目根目录的 package.json 中配置：
-
"sideEffects": false：表示整个包完全纯净，没有任何副作用。适合纯工具库（如lodash-es、自研的 utils 库）。一旦设为false，所有未使用导出都会被删除，连 CSS、字体、polyfill 都会被清掉——用前务必确认。 -
"sideEffects": ["*.css", "*.scss", "src/polyfills.js"]：最常用、最推荐的方式。只列出真正有副作用的文件或 glob 模式。CSS 文件、SVG 字体、全局初始化脚本都应列在这里。 -
不写 sideEffects 字段：等价于
"sideEffects": true，构建工具默认认为每个文件都可能有副作用，Tree Shaking 基本不工作。
常见错误与避坑点
这些细节容易导致样式丢失、功能异常，却很难排查：
- CSS 文件路径匹配要准确：
"*.css"可匹配src/a.css和lib/b.css；但"src/**/*.css"就不会匹配node_modules/xxx/style.css。 - 第三方库的副作用由它自己的
package.json控制。如果你用了不带sideEffects: false的旧版库，它的全部代码都会被保留，哪怕你只 import 了一个函数。 - 动态导入（
import()）和require()不受sideEffects管控，也无法被 Tree Shaking 分析，尽量避免在需摇树的模块中混用。 - Vite 或 Next.js 默认读取
package.json的sideEffects，但 Webpack 还需确保mode: 'production'且未手动关闭optimization.sideEffects（默认开启）。
验证是否生效的小技巧
改完配置后别急着上线，快速验证一下：
- 在
src/index.js中只 import 一个函数，比如import { debounce } from './utils'，不引入其他导出； - 运行
npx webpack --mode=production --devtool=source-map； - 打开生成的
dist/main.js，搜索未引入的函数名（如throttle），确认它没出现在最终代码里； - 再检查
dist下是否存在 CSS 文件——如果存在，说明sideEffects中的"*.css"生效了。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
