Tree Shaking

为什么必须是 ESM

CommonJS 的 require() 是动态的，依赖关系只有运行时才能确定（可以在 if 语句、函数内部 require），静态分析无法得知哪些导出被用到。ES Modules 的 import/export 是静态声明，只能在模块顶层使用，这让打包工具在编译时就能建立完整的导入图。Rollup 是第一个将 Tree Shaking 推广开的工具（2015 年），它的作者 Rich Harris 写了博文解释这个概念并流行开来；Webpack 2（2017 年）随后引入。[1]

副作用与实践陷阱

Tree Shaking 的最大敌人是副作用：如果一个模块在 import 时就执行了全局注册、polyfill 注入等操作，打包工具无法安全删除它。package.json 中的 "sideEffects": false 字段告诉打包工具「本包所有模块均无副作用，可安全 shake」；或用数组列出有副作用的文件（如 CSS 文件）。实际项目中，lodash 是 Tree Shaking 的经典反例——CommonJS 版本无法 shake，需改用 lodash-es（ESM 版）或按路径引入（import debounce from 'lodash/debounce'）。