Tree Shaking(摇树优化)是前端打包工具(如 Webpack、Rollup)中的一种代码优化工艺,它能移除项目中未被实际使用的代码,从而减小最终打包体积,提升应用加载性能。
一、Tree Shaking 的核心原理
Tree Shaking 基于 ES6 模块系统的静态特性实现:
- ES6 模块的静态分析:ES6 模块(
import/export)是编译时确定依赖关系的,而非运行时。打包工具能在构建阶段分析出模块的导入导出关系,识别出未被使用的代码。 - 死代码消除(Dead Code Elimination):通过语法分析标记出 “未被引用” 的代码(死代码),最终在打包时将其剔除。
对比 CommonJS 模块(require)的动态特性(运行时加载),Tree Shaking 无法对其生效,这也是为什么 Tree Shaking 主要针对 ES6 模块。
二、Tree Shaking 的适用条件
- 使用 ES6 模块:代码必须基于
import/export,而非require。 - 启用模块解析:打包工具需配置为处理 ES6 模块(如 Webpack 中设置
mode: 'production'自动启用)。 - 无副作用代码:需明确标记 “无副作用” 的模块,避免应用误删必要代码(如修改全局变量的代码)。
三、在计划中的应用
1. Webpack 中的设置
Webpack 4+ 中,production&n