Tree-Shaking（摇树优化）是一种在前端开发中广泛使用的代码优化技术，主要用于移除项目中未使用的代码（也称为"死代码"），从而显著减小打包后的文件体积，提升网页的加载速度和运行效率。
1. 形象的比喻
Tree-Shaking 的字面意思是"摇树"。你可以把整个项目代码库想象成一棵长满叶子的大树，而入口文件就是树干。虽然你引入了很多模块（树枝），但实际只使用了其中的一部分功能（果实）。Tree-Shaking 就像用力摇晃这棵树，把那些你实际上没有用到的代码（枯叶）抖落掉，只保留你真正需要的部分。
2. 核心工作原理
Tree-Shaking 的核心依赖于静态分析技术，即在不实际执行代码的情况下，通过分析代码的语法结构来识别哪些部分被使用，哪些未被使用。其工作过程主要包括：
- 静态分析：构建工具从入口文件出发，扫描所有模块及其依赖关系，构建一个"依赖图"（或抽象语法树 AST）。
- 标记与消除：工具会标记实际被引用的函数、变量和类。随后，将未被标记的代码识别为"可移除"的死代码，并在最终的打包过程中将其剔除。
3. 生效的必要条件
要成功触发 Tree-Shaking，通常需要满足以下条件：
- 使用 ES6 模块规范 ：Tree-Shaking 高度依赖 ES6 模块系统（
import和export）的静态结构特性。因为 ES6 的导入导出在编译阶段就能确定，打包工具才能进行精确的静态分析。它不支持 CommonJS（require）这种动态加载模块的方式。 - 支持该特性的构建工具 ：需要使用如 Webpack（v2及以上）、Rollup 或 Vite 等主流打包工具，并通常在
production（生产）模式下开启。 - 按需导入 ：在编写代码时，应尽量使用按需导入（如
import { debounce } from 'lodash'），而不是将整个库全部引入。
4. 注意事项：副作用（sideEffects）
在处理 Tree-Shaking 时，需要特别注意"副作用"问题。副作用指的是模块在导入时不仅暴露了接口，还会对外部环境产生影响（例如修改全局变量、自动执行初始化逻辑或注入 CSS 样式等）。
为了防止打包工具错误地移除这些有副作用的必要代码，开发者需要在 package.json 中正确配置 sideEffects 字段：
- 如果整个包都没有副作用，可配置
"sideEffects": false，允许所有代码被安全优化。 - 如果包含 CSS 等有副作用的文件，可以明确指定保留，例如
"sideEffects": ["*.css", "*.scss"]。