什么是 Tree-shaking？我用最简单、面试直接能说的方式给你讲清楚！

一、一句话定义（背这个）

Tree-shaking = 摇树优化
就是只打包项目里【用到的代码】，自动删除【没用到的死代码】，让打包体积更小。

就像摇树：
树上的好果子（用到的代码） 留下，
枯叶（没用到的代码） 摇下来扔掉。

二、举个超级简单例子

你写了一个工具文件：

// utils.js
export const funcA = () => { console.log("A") }
export const funcB = () => { console.log("B") }

然后你只引入 funcA：

import { funcA } from './utils'
funcA()

Tree-shaking 会做什么？
打包后：funcB 直接被删掉！
最终包里只保留 funcA，体积更小。

三、Tree-shaking 核心原理（面试必问！）

原理一共 3 步，非常好记：

1. 基于 ES Modules（import/export）

必须是静态导入：

import xxx from 'xxx'   // ✅ 支持
export const xxx = xx  // ✅ 支持

不能是动态的 CommonJS：

require()       // ❌ 不支持

原因：import 是编译时确定的，工具能提前知道你用了什么、没用到什么。

2. 静态分析代码

打包工具（Rollup/Webpack）会：

• 扫描所有文件
• 记录导出了什么
• 记录导入了什么
• 标记没被引用的代码

3. 删除未被引用的代码

最后打包时，只保留被使用的代码，没用到的全部删除。

四、Tree-shaking 生效条件（面试常问坑点）

1. 必须使用 ES Modules（import/export）
2. 生产环境打包（开发环境一般不删）
3. 不能有副作用（side effects）
   比如直接执行的函数、修改全局变量的代码不会被删
4. 配置开启优化（Vite/Rollup/Webpack 默认生产已开启）

五、面试满分回答（直接背）

Tree-shaking 是一种基于 ES Modules 的代码优化技术，通过静态分析语法，在打包时删除未使用的代码（死代码），从而减小打包体积。它的原理是利用 import/export 静态语法特性，在编译阶段确定依赖关系，只保留用到的代码，剔除无用代码。

六、超级总结（3 句话记住）

1. Tree-shaking = 摇掉没用的代码
2. 必须用 ES Modules（import/export）
3. Rollup 比 Webpack 摇得更干净，所以 Vite 生产用 Rollup

你现在是不是能把 Vite → Rollup → Tree-shaking 三者串起来了？
我可以帮你把这三个知识点合成一段面试满分回答，让你直接背！