正确配置 sideeffects 是 tree shaking 生效的关键,需用数组声明有副作用的文件(如 "*.css"、"src/polyfills.js"),纯工具库可设为 false,不声明则默认全部保留导致摇树失效。

在 package.json 中正确配置 sideEffects,是让 Tree Shaking 发挥实效的关键一步。它不是开关,而是“副作用白名单”——告诉构建工具哪些文件必须保留,其余未使用代码才能被安全移除。
明确声明哪些文件有副作用
最常用也最稳妥的方式是用数组列出真实存在副作用的文件或通配模式:
-
"*.css"和"*.scss":匹配所有 CSS/Sass 文件,确保样式不被误删 -
"src/polyfills.js":保留全局垫片脚本,避免运行时缺失 API -
"*.svg"或"fonts/*.woff2":如果字体、图标通过 import 加载,也要列出来 - 路径需准确:用
"*.css"能匹配src/a.css和node_modules/lib/style.css;但"src/**/*.css"就不会命中node_modules下的样式
纯工具库可设为 false
如果你开发的是像 lodash-es 这类只导出函数、不操作全局、不引入样式或资源的工具包,可以写:
这表示整个包无任何副作用,构建工具会激进删除所有未使用的导出。但注意:
使用 JSON Schema 验证 JSON 数据,从示例 JSON 生成 schema,并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 一旦设为
false,连import './index.css'都会被删掉 - 务必确认项目中没有隐式副作用(比如模块顶层执行了
localStorage.setItem)
不写 sideEffects 等于全部保留
如果不声明该字段,构建工具默认 "sideEffects": true,即每个文件都可能有副作用。结果就是 Tree Shaking 基本失效,打包体积难以下降。
尤其要注意第三方库:如果它自己的 package.json 没配 sideEffects,哪怕你只 import { debounce } from 'lodash-es',整个 lodash-es 的代码也可能全被打进去。
避开常见坑点
这些细节看似小,却常导致样式丢失、polyfill 失效、全局方法不可用:
- CSS 导入必须出现在模块顶层,且不能包裹在函数或条件中(否则构建工具无法静态分析)
- 动态导入
import()和require()不受sideEffects控制,也无法被 Tree Shaking 分析,尽量不用在核心逻辑里 - 第三方库的副作用由它自己声明,你无法替它改;若遇到老库没配
sideEffects,可考虑替换或用别名 +resolve.alias引导到已优化版本
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










