Tree Shaking 是一种基于 ES6 模块静态分析的构建优化技术，通过移除未引用代码来减小打包体积。它依赖 import/export 语法、生产模式配置和 sideEffects 标记，需避免动态引入并使用支持 Tree Shaking 的库，如 lodash-es，才能有效消除死代码。
Tree Shaking 并不是 JavaScript 本身的特性，而是一种在构建阶段通过静态分析代码来“摇掉”未使用代码的优化技术。它广泛应用于现代前端构建工具（如 Webpack、Rollup、Vite）中，帮助减少最终打包文件的体积。名字来源于想象一棵树，你摇一摇，没长牢的叶子（未使用的代码）就掉了下来。
Tree Shaking 是如何工作的？
Tree Shaking 的实现依赖于 ES6 模块系统（import / export）的静态结构。与 CommonJS 的动态引入不同，ES6 模块在编译时就能确定导入导出关系，这让构建工具可以进行静态分析。
基本流程如下：
- 构建工具从入口文件开始，分析所有通过 import 引入的模块
- 标记所有被实际引用的 export 成员
- 未被引用的函数、变量等被视为“死代码”
- 在打包输出时，这些未被引用的代码将被排除
举个例子：
立即学习“Java免费学习笔记（深入）”；
// utils.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
<p>// main.js
import { add } from './utils.js';
console.log(add(2, 3));
在这个例子中，subtract 函数没有被任何模块引入，因此在构建时可以被安全地移除。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
实现 Tree Shaking 的前提条件
要让 Tree Shaking 正常工作，必须满足几个关键条件：
- 使用 ES6 模块语法（import 和 export），避免使用 require
- 确保构建工具启用生产模式（如 Webpack 中 mode: 'production'）
- 代码本身不能有副作用，或明确标注哪些模块有副作用（通过 "sideEffects" 字段）
关于副作用：如果一个模块在导入时执行了某些操作（比如修改全局变量、注册事件监听），即使没有使用其导出内容，也不能被删除。这时可以在 package.json 中设置：
{
"sideEffects": false
}
表示整个项目无副作用，允许安全删除未引用代码。如果有特例，可以写成数组形式指定哪些文件有副作用。
实际应用中的注意事项
虽然 Tree Shaking 很强大，但在实际开发中容易因写法问题导致失效：
- 避免动态导入或运行时判断引入模块，这会破坏静态分析
- 不要在导入后解构赋值再使用，有些旧版本工具无法追踪这种用法
- 第三方库需提供 ES 模块版本（即 module 或 jsnext:main 字段）才能有效 shake
例如，Lodash 如果直接这样引入：import _ from 'lodash';
会导致整个库被打包进来。应改为按需引入：import { debounce } from 'lodash-es';
这样才能真正 shake 掉不用的部分。
总结
Tree Shaking 是提升前端性能的重要手段，核心在于利用 ES6 模块的静态结构做死代码消除。它不是自动生效的魔法，需要正确的模块语法、构建配置和编码习惯配合。只要保持使用标准 import/export，注意副作用声明，并选择支持 Tree Shaking 的库，就能显著减小打包体积。
基本上就这些。不复杂但容易忽略细节。
