← 中文资源

简体中文版本

Tree Shaking

Tree shaking 移除从未被导入的代码,依赖 ES 模块的静态导入结构剔除无用导出。

阅读英文原文

概念定义

Tree shaking 是模块层面的死代码消除:打包器分析 ES 模块的静态导入图,移除没有被任何可达代码导入的导出。它能奏效是因为 ES 模块的导入是静态、可分析的,不同于目标可能动态的 CommonJS require 调用。其效果取决于打包器能证明多少——副作用、动态导入与再导出模式都会限制可安全移除的范围。

为什么重要

应用常常依赖庞大的库,却只使用其中一小部分。没有死代码消除,未使用的部分仍要下载、解析并执行,损害启动与带宽。Tree shaking 让一个组织良好的库服务众多消费者,各自只发布自己导入的部分,这也是现代库以许多小而无副作用的模块构建的原因。

工程实践

向消费者发布 ES 模块,并准确声明 sideEffects,使打包器可以大胆裁剪。避免会让代码被迫保留的顶层副作用,把动态导入——一种有意的边界——与静态导入区分开来,并把任何对消费者可见的副作用视为有意为之且有文档记录。通过分析产物来验证结果,因为 tree shaking 是工具只在能证明安全时才会执行的优化。