Tree Shaking 是构建时基于 ES 模块静态结构移除未使用导出的优化技术，依赖具名导入、字面量导出和无副作用声明，并需正确配置构建工具。
Tree Shaking 是一种在构建时（如使用 webpack、Rollup 或 vite）自动识别并移除 javaScript 中未被引用、未被使用的代码（dead code）的优化技术。它不是运行时行为，也不依赖于压缩工具（如 Terser）的变量名混淆或删除，而是基于 ES 模块（import/export）的静态结构，在编译阶段就“摇掉”那些确定不会执行的分支。
它依赖 ES 模块的静态可分析性
Commonjs（require）是动态加载、运行时决定依赖关系，无法在构建前确认哪些导出没被用到；而 ES 模块的 import 和 export 语句必须是顶层的、静态的——这意味着打包工具能不执行代码，仅靠语法分析就能画出完整的模块依赖图和引用链。
- 只有具名导入（
import { foo } from './utils.js'）才可能触发 Tree Shaking；默认导入（import utils from './utils.js'）若模块没有export default的显式标记，或存在副作用，往往无法安全剔除 - 导出必须是字面量声明（
export const a = 1、export function fn(){}），不能是动态赋值（export { something }中的something若来自计算结果，会阻碍分析） - 如果一个模块里有副作用（比如直接执行了
console.log、修改全局变量、绑定事件等），即使没被 import，也可能被保留——可通过/*#__PURE__*/注释或package.json中的"sideEffects": false显式声明无副作用
它不是删函数，而是删“未被连接的导出”
Tree Shaking 不是简单地检测“某个函数有没有被调用”，而是看：这个 export 是否出现在任何一条从入口文件出发的、可到达的 import 路径上。只要没被任何活的引用链触达，整个导出声明（包括其内部逻辑）就可能被剔除。
- 例如：你写了
export const unusedHelper = () => {...}，但项目中没有任何地方import { unusedHelper }或import * as x后用到它 → 它大概率被摇掉 - 但如果你写了
export default () => {...}，又只用了import xxx from './x'却没调用xxx，默认导出仍会被保留——因为 ES 模块规范要求默认导出必须执行（除非明确标记为 pure 或 sideEffects: false） - 类、对象字面量、箭头函数本身不会被“自动内联”，Tree Shaking 关注的是导出绑定（binding）是否存活，而不是函数体是否冗余
实际生效需要构建工具+正确配置
即使代码符合 ES 模块规范，若构建配置不当，Tree Shaking 也会失效：
立即学习“Java免费学习笔记（深入）”；
- Webpack 需要
mode: 'production'（开启optimization.usedExports和concatenateModules） - 确保 Babel 不把
import/export编译成require（禁用@babel/preset-env的modules: 'commonjs'） - 第三方库若用了 CommonJS 或未标注
sideEffects，它的全部代码都可能被整包引入——建议优先选已做 ESM 发布且声明了"type": "module"或"sideEffects": false的库
基本上就这些。Tree Shaking 不复杂，但容易忽略模块格式、副作用声明和构建配置这三个关键点。写代码时保持导出粒度清晰、避免意外副作用，再配好工具链，它就会安静地帮你减小包体积。