Tree Shaking 死代码消除原理

可视化演示

可视化ESM静态分析依赖树、标记副作用模块、摇树后打包体积对比，滑块调节摇树强度观察死代码消除效果。

何为摇树

小明的果园里除了苹果树，还有几棵老树一直不结果。他总算明白：树要养，但也不能让废枝废叶白白消耗养分。放在前端世界里，这个“养分”就是用户的带宽和设备的内存。一个 JS 文件里，可能有 30% 甚至更多的代码从来没有被执行过——它们可能是上个版本遗留的工具函数、被注释掉的业务逻辑、或者整包引入的库中从未用到的方法。这些代码就是“枯叶”，专业上叫做死代码（dead code）。

摇树优化要做的事情，正是这些：在打包阶段识别出哪些导出从来没有被引用，然后把这些代码从最终产物里剔除。死代码减少后，打包体积变小，浏览器下载和解析的时间都缩短，首屏加载自然更快。为什么体积如此重要？因为移动端网络的每一 KB 都可能意味着多几百毫秒的白屏，而用户的耐心往往只有三秒。

小明第一次摇树时，心里也没底：到底能省下多少？这有一个直观的衡量公式：

第一次摇完树，小明看着地上厚厚的落叶，忍不住感慨：原来这棵树上藏着这么多没用的枝条。而在前端工程里，Tree Shaking 每省下 1KB，都是给用户体验的账户里存了一笔真金白银。

静态分析

小明摇树前，会先翻一本果园账本，上面清清楚楚记录着：这根枝条属于哪棵果树、结了几个果子、哪个果子已经被预订（被 import 引用）。Tree Shaking 之所以能精准地只在“该摇的树”上动手，靠的也是类似的账本——模块依赖图。

账本能成立的前提，是 ES Module 的静态性。import 和 export 必须写在文件的顶层，不能包在 if 或函数里，也不能用变量拼接导入路径。这意味着构建工具在运行代码之前，光靠“读”就能确定谁依赖谁。于是它从入口文件出发，像巡园一样遍历每一根枝条，每遇到一条 import { add } from './utils'，就给 utils 模块的 add 导出记一笔“被引用”。遍历结束后，哪些导出一次都没被记过，就进入了死代码清单。

这个过程可以抽象成一个集合公式：

那为什么 CommonJS 的 require 就不能摇？因为 const path = './a' + name; require(path) 这样的代码，路径是运行时才能算出来的。小明的账本全是空白，他根本不知道这捆乱藤通向哪里，自然不敢乱剪。所以业界才反复强调：想摇树，请优先使用 ES Module。

副作用守卫

又一年秋天，小明正要挥剪子剪掉一片看似干枯的叶子，养蜂的老王拦住他：“别剪！那片叶子底下挂着我的蜂箱！”叶子虽然不结果，但它支撑着蜂箱，影响到明年的授粉。这就是“没有明面产出，却有潜在影响”的代码——专业术语叫副作用。

在 JS 里，副作用是指模块加载时对全局环境产生的修改：比如给 window 挂一个全局变量、给浏览器打 polyfill 补丁、或者引入一段 CSS。这类模块可能全程没有导出任何东西，但一旦删掉，整个应用都会崩溃。为了安全，构建工具需要开发者提供一份“体检表”——package.json 里的 sideEffects 字段。当它被声明为 false 时，等于告诉工具：“这个包里所有模块都是纯的、无副作用的，没被用到就大胆删！”也可以写成数组，只把有副作用的文件列进白名单。

更精细的场合，我们会用 /*#__PURE__*/ 注释标记纯函数，告诉压缩器这个函数调用可以安全移除。综合来看，一个模块能否被整个删除，取决于它是否被使用以及是否有副作用：

从那天起，小明的果园多了一条铁律：动手前先看体检表。对前端项目来说，正确配置 sideEffects 是摇树安全的第一道护栏——它决定了你能多大刀阔斧，又会不会误伤队友。

Webpack实践

小明攒够了钱，请来一台“自动摇树机”——这就是 Webpack。在 Webpack 的世界里，摇树不是默认随时开启的，只有在 mode: 'production' 生产模式下，它才会进入工作状态。因为开发模式下需要快速热更新、保留完整错误堆栈，摇树反而碍事。

配置中的 usedExports: true 是摇树的“标记环节”：Webpack 在静态分析阶段给每个被引用到的导出打上“有用”标签，没有标签的导出先做标注，随后交给压缩器动刀。minimize: true 则启用 TerserPlugin——它才是真正执行删除的刽子手，会把标记为未使用的代码连同注释、空格一起清掉。除此之外，Webpack 还会做一件很有意思的事：模块合并（scope hoisting），把多个模块内联到同一个作用域里。就像小明把几十个小筐合成一个大筐，减少了运输过程中的空耗。

在实际接入时有一个典型陷阱：如果你引入的是 CommonJS 格式的第三方包，比如老版本的 lodash，Webpack 面对动态 require 也无能为力。解决之道是换用 lodash-es 等 ESM 版本，或者依赖库自带的 module 字段。只要依赖本身是 ESM，自动摇树机就能顺畅运转，把 import { debounce } from 'lodash-es' 里没用的 cloneDeep、throttle 通通摇落。

// webpack.config.jsmodule.exports = {  mode: 'production',  optimization: {    usedExports: true,    minimize: true,  },};

Vite实践

如果说 Webpack 是一台笨重但可靠的摇树机，那 Vite 就像开着电动马达的新式装备：又快又准。Vite 在生产构建时，底层借用了 Rollup 的能力，而 Rollup 从诞生第一天起就是“为摇树而生”的 ESM 打包器。所以在 Vite 项目中，vite build 默认开启 Tree Shaking，几乎不需要额外配置。

Vite 的第二个独门绝技是 esbuild 预构建。很多第三方库还是 CommonJS 老古董，Vite 会先用 esbuild 把它们打包并转换成 ESM 格式，再交给 Rollup 摇树。这个过程相当于小明把那些乱藤先理成整齐的枝条，再装上摇树机。对于大型图表库、日期库这类重资产，你还可以通过 manualChunks 手动分包，把体积最大的依赖单独拆出来利用浏览器缓存：

配合组件库的按需引入，比如在 Vue 项目中使用 unplugin-vue-components，Vite 会把你 import 的每个组件单独打包，其余组件直接留在库里不上车。想象一下，小明以前运果子要装一整卡车，现在按需只装客人点的那几筐——满载率反而更高了。

// vite.config.jsexport default {  build: {    rollupOptions: {      output: {        manualChunks: { echarts: ['echarts'] },      },    },  },};

死码消除

摇树是“整枝剪除”，但果园的死木头远不止整根枝条。有些树干内部早就空心腐烂，表面看不出问题，它们对应的是死代码消除（DCE）要处理的另一类情况。Tree Shaking 和 DCE 的关系就像大扫除和擦玻璃：一个管宏观清理，一个管微观细节。

死代码消除是编译器领域的经典优化技术，它处理的形态包括：不可达分支（if (false) { ... } 永远不执行）、常量折叠（const x = 2 * 3 直接算成 6）、以及冗余变量消除。这些优化能把代码中“逻辑上不会被跑到”的部分提前删除，往往和 Tree Shaking 协同作战。Terser 等压缩器在 Webpack 的摇树标记之后，还会顺手完成这一层清理：摇树负责删除「模块导出的死代码」，DCE 负责删除「函数内部的死代码」。

经过两轮修剪，最终产物体积可以写成：

小明的感受是：摇树让果园看起来清爽，DCE 让他连果子上的一层浮灰都擦掉了。两者配合，运出去的每一筐都是真正的精品果。

排查调优

果园经营到第三年，小明开始用账本复盘：每棵树的产出、每筐果子的重量、每车运输的成本，全部记录在案。前端体积优化同样需要“用数据说话”，而不是凭感觉乱摇。最常用的工具是 webpack-bundle-analyzer（Vite 项目可用 rollup-plugin-visualizer），它能把打包产物渲染成一棵可视化的矩形树，哪个包占了半壁江山一目了然。

下一步是检查未用导出。在代码里，我们经常把整库导入进来只用一两个方法，或者留着一堆 export 不清理。构建工具会给出警告，提示哪些导出被打上了 unused 标记。这时候要做减法：删除不再使用的函数，把 import * as utils 改成具名导入 import { formatDate } from './utils'。

第三类问题出在第三方库上。老牌的 moment.js 体积巨大且难以摇树，可以换成 dayjs；lodash 选用 lodash-es；图表库选用支持 ESM 的版本或配置按需引入。如果某个库实在无法摇，再考虑把它单独分包，利用 CDN 和浏览器缓存。

总结一份调优清单：项目入口使用 ESM 语法、package.json 正确声明 sideEffects、优先 ESM 第三方库、组件按需引入、用体积分析工具周期性体检。小明每年收获后都会对账：今年比去年少运了几车、多赚了几筐。前端工程师也一样——每一次摇树，都是在为用户的时间账户里多存进一毫秒。

AI 应用场景

Python 演示

# -*- coding: utf-8 -*-"""模拟 Tree Shaking: 从入口遍历模块图, 删除未被引用的模块与导出.""" MODULES = {    "entry": {        "exports": [],        "imports": [("utils", "add"), ("utils", "sub")],        "size": 10,    },    "utils": {        "exports": ["add", "sub", "mul", "div"],        "imports": [],        "size": 120,        "side_effects": False,    },    "debug": {        "exports": ["log", "trace", "assert"],        "imports": [],        "size": 80,        "side_effects": False,    },    "polyfill": {        "exports": [],        "imports": [],        "size": 60,        "side_effects": True,    },}  def collect_live(mods, entry):    live_mods = {entry}    live_exports = {}    stack = [entry]    while stack:        name = stack.pop()        mod = mods[name]        used = set()        for target, symbol in mod.get("imports", []):            live_mods.add(target)            used.add(symbol)            stack.append(target)        live_exports[name] = used    return live_mods, live_exports  def shake(mods, entry):    live_mods, live_exports = collect_live(mods, entry)    dead_mods = [        name for name, mod in mods.items()        if name not in live_mods and not mod.get("side_effects", False)    ]    dead_exports = {}    saved_size = 0    for name in dead_mods:        saved_size += mods[name]["size"]    for name, used in live_exports.items():        mod = mods[name]        unused = set(mod.get("exports", [])) - used        if unused:            dead_exports[name] = sorted(unused)            saved_size += 10 * len(unused)    return dead_mods, dead_exports, saved_size  if __name__ == "__main__":    dead_mods, dead_exports, saved = shake(MODULES, "entry")    print("死模块:", dead_mods)    print("每个模块的死导出:", dead_exports)    print("可节省代码量:", saved)

1. collect_live(mods, entry)从入口开始 BFS 遍历，把所有可达模块标记为“存活”。
2. for target, symbol in mod.get("imports", [])逐个读取模块的 import 列表，相当于构建工具在读依赖关系。
3. used.add(symbol)记录某模块中被真正用到的导出符号，这是判断死导出的关键。
4. if name not in live_mods and not mod.get("side_effects", False)同时满足“不可达”和“无副作用”的模块才能整个删除。
5. set(mod.get("exports", [])) - used用全部导出减去已使用导出，差集就是死导出。
6. saved_size += mods[name]["size"]累加被删除模块的代码量，相当于果园里称一称枯枝的重量。
7. if __name__ == "__main__":脚本入口，运行后打印死模块、死导出和可节省的代码量。

常见误区

面试题