Tree shaking
原理
Tree-Shaking 的核心原理是基于 ES Module 的**静态结构分析**(配合 Dead Code Elimination 删除死代码)。ES Module 的 import/export 语句必须在模块顶层声明且不可动态修改,这使得打包工具(如 Webpack、Rollup)可以在编译阶段分析模块的依赖关系和导出内容,进而标记未使用的代码并在最终产物中删除它们。
CommonJS 无法 Tree-Shaking 的原因:
CommonJS 的 require/module.exports 是动态的,支持条件导入、运行时拼接路径等操作,例如:
// 动态导入(CommonJS)
const module = condition ? require('./A') : require('./B'); // 无法静态分析这种动态性导致打包工具无法在编译阶段确定模块的依赖关系和导出内容,因此无法安全删除未使用的代码。