Tree shaking 是打包工具在构建时移除未使用 ES 模块代码的优化机制，依赖静态 import/export 分析，需具名导出、禁用 Babel 转译、声明无副作用等条件才能生效。
Tree shaking 是 JavaScript 打包工具（如 Webpack、Rollup、Vite）在构建时自动移除未使用代码的优化机制，它本身不是 JavaScript 语言特性，而是依赖 ES 模块（ESM）的静态结构 实现的。要让 tree shaking 生效，关键不在“怎么写 JS”，而在于“怎么导出/导入 + 怎么配置打包工具”。
为什么只有 ES 模块支持 tree shaking
ES 模块的 import/export 是静态的：在代码解析阶段就能确定哪些导出被引用、哪些没被引用。而 CommonJS（require/module.exports）是动态的，运行时才决定加载什么，打包器无法安全地判断某个 export 是否真没被用到。
- ✅ 正确（可被 shake）：
export const utils = { a: 1 };+import { a } from './utils.js' - ❌ 无法 shake（CommonJS）：
module.exports = { a: 1 };+const { a } = require('./utils') - ⚠️ 注意：即使用了 ESM，如果导出是
export default { a: 1 }这种对象字面量，默认导出整体可能无法被深度 shake，建议用具名导出
让 tree shaking 生效的关键操作
光写 ESM 不够，还需确保整个链路“干净”：
-
用具名导出代替默认导出：比如
export const foo = () => {}而非export default { foo: () => {} } -
避免副作用干扰：如果模块执行时有副作用（如修改全局变量、发起请求），打包器不敢删它。可通过
/*#__PURE__*/注释标记纯函数，或在package.json中声明"sideEffects": false（或显式列出有副作用的文件） -
禁用 babel 的 ESM 转译：Babel 默认把
export编译成module.exports，会破坏静态分析。需设置babel.config.js中presets: [['@babel/preset-env', { modules: false }]] -
生产模式构建：Webpack 需开启
mode: 'production'；Rollup/Vite 默认启用
一个可被 shake 的简单例子
math.js
立即学习“Java免费学习笔记（深入）”；
export const add = (a, b) => a + b; export const multiply = (a, b) => a * b; export const PI = 3.14159;
main.js
import { add } from './math.js';
console.log(add(2, 3)); // 只用了 add构建后，multiply 和 PI 会被移除（前提是满足上述所有条件）。
如何验证 tree shaking 是否生效
最直接的方式是查看最终打包产物（如 dist/main.js）是否包含未使用的导出；更推荐用工具分析：
- Webpack：加
--stats=verbose或用webpack-bundle-analyzer - Rollup：启用
treeshake: { moduleSideEffects: false }并观察 warning - Vite：运行
vite build --report生成report.html查看模块依赖图
基本上就这些 —— 它不复杂，但容易忽略配置细节和模块规范的一致性。
