理解 Tree Shaking：原理与那些“甩不掉”的代码陷阱

前端打包体积越来越臃肿，TreeShaking成了救命稻草。这个技术像老农挑担子，把没用到的代码枝叶咔嚓剪掉，只留下结实的树干。

Webpack和Rollup这些工具干活时，会标记哪些代码被使用过。它们像精明的会计，把没被引用的函数、变量统统扔进废纸篓。ES6模块化是这场大扫除的通行证，因为import和export的静态特性让工具能轻松追踪依赖关系。

现实总爱开玩笑。有些代码像牛皮糖一样甩不掉，比如动态导入的模块，工具们只能干瞪眼。副作用文件更是捣蛋鬼，哪怕只导出一个空对象，只要写了"sideEffects: false"，整个文件就被囫囵吞下。CSS-in-JS库常犯这毛病，它们运行时生成的样式让打包工具无从下手。

Babel有时会帮倒忙。把ES6模块转成CommonJS时，就像把分类好的垃圾又倒回一个大桶，TreeShaking直接傻眼。第三方库如果没提供ESM版本，再锋利的摇树工具也成了钝刀子。

有种情况特别让人挠头。工具类库导出的对象方法，哪怕只用到一个，整个对象都被迫打包进来。这就像买整只烤鸭却只吃片皮，剩下的只能眼睁睁看着浪费。

要解决这些难题，得从写代码时就留个心眼。尽量用纯函数，像切好的水果块单独摆放，别把它们榨成难分离的果汁。给库作者提个醒，在package.json里标清楚副作用范围，别让使用者被迫吞下整头牛。

现代打包工具正在进化。Webpack的副作用分析越来越聪明，Rollup能结合插件做深度清理。记住关键原则：模块化是地基，静态分析是钢架，明确标记是施工图。三者凑齐了，才能盖出结实又苗条的代码大厦。