要让 Tree Shaking 正常工作,需确保模块无顶层副作用、导出纯函数、用 sideEffects 字段精准声明副作用文件,并避免破坏静态分析的写法。

副作用代码会让打包工具“不敢删”——哪怕函数没被调用,只要模块顶层存在 console.log、fetch、修改全局变量等行为,整个文件就可能被完整保留。要让 Tree Shaking 正常工作,核心是让模块“看起来安全可删”。
把副作用操作移到调用处
工具函数本身应保持纯函数特性:只接收输入、返回输出,不触发任何外部影响。
- ❌ 错误写法(顶层副作用):
export function logEvent(name) { console.log('track:', name); }
该函数导出前已隐含副作用,模块会被整体保留 - ✅ 正确写法(纯导出 + 副作用后置):
export function logEvent(name) { return () => console.log('track:', name); }
导出的是函数定义,执行由使用者控制,Tree Shaking 可按需剔除未引用的 logEvent
不在模块顶层执行任何逻辑
ES 模块加载时会立即执行顶层语句,这极易引入意外副作用。
分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。
- 禁止在 utils.js 顶部写
localStorage.setItem('init', '1')或document.addEventListener(...) - 禁止直接调用埋点函数:
trackPageView();(即使没被 import,也会因副作用被保留) - 所有初始化、监听、上报类逻辑,必须包裹在函数体内,由明确调用触发
用 sideEffects 字段精准声明
在 package.json 中告诉打包工具哪些文件有副作用,避免“一刀切”式保守保留。
- 若只有
src/entry.js和src/polyfill.js有真实副作用,写:"sideEffects": ["src/entry.js", "src/polyfill.js"] - 不要设
"sideEffects": false后,还在某模块里偷偷改window.xxx——这会导致实际副作用被误删,引发运行时错误 - 样式文件、字体、SVG 等资源导入也属于副作用,需一并列进数组(如
"*.css")
避免破坏静态分析的写法
以下操作会让打包器无法判断代码是否真被使用,从而放弃摇树。
- 不用
eval()、Function('return 1')()、with等动态语法 - 避免间接调用:如
window['track']()或obj[methodName](),改用直接命名调用 - 不要在导出对象上做运行时赋值:
export const utils = {}; utils.fn = () => {}—— 这种动态挂载无法被静态识别
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










