Tree Shaking 是一种在构建阶段移除未被引用的 ES 模块代码以减小打包体积的优化技术,依赖静态分析 import/export 语法,需满足 ES 模块、生产模式及工具支持三前提。

Tree Shaking 是一种在构建阶段移除未被引用的 JavaScript 代码(即“死代码”)的优化技术,目标是减小最终打包体积,提升加载与执行效率。
Tree Shaking 依赖 ES 模块的静态结构
它只对使用 ES6 import/export 语法的模块生效。因为这类语句在编译时就能确定依赖关系,打包工具可以准确分析哪些导出被真正用到。
- ✅ 支持示例:
import { cube } from './math.js'—— 工具能识别出只有cube被引入,square可被剔除 - ❌ 不支持示例:
const { cube } = require('./math.js')——require是运行时动态加载,无法静态分析
核心工作流程是三步静态分析
打包工具(如 Webpack、Rollup、Vite)在构建时执行:
使用约定式提交(Conventional Commits)生成标准化的 Git 提交信息。适用于以下场景: (1) 暂存更改时需要提交信息; (2) 审查 diff 时希望获得结构化摘要; (3) 编写 PR 描述或变更日志(changelog)条目; (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff,并生成按类型(type)划分范围的提交信息。
- 从入口文件出发,递归解析所有
import语句,构建完整的模块依赖图 - 标记每个
export是否被某个import显式引用 - 在生成 bundle 前,将未被标记为“已使用”的导出内容直接删除
必须满足的前提条件
缺一不可,否则 Tree Shaking 不会触发:
- 项目中使用的是 ES Module 语法(不是 CommonJS 或 AMD)
- 构建配置启用 生产模式(例如 Webpack 的
mode: 'production') - 打包工具本身支持该特性(主流现代工具均已内置)
本质是“标记使用的代码”,而非“识别无用代码”
更准确地说,Tree Shaking 并非主动寻找“没用的函数”,而是通过作用域和导入路径,精确找出哪些导出变量被实际消费,其余一概不包含进最终输出。这也解释了为什么副作用(如顶层执行的 console.log、全局赋值)可能阻碍剔除——工具需保守处理,避免破坏运行行为。

















