Tree Shaking生效需满足三点：使用ES Module语法（顶层import/export、字符串字面量路径、lodash-es等适配库）、构建工具正确配置（production模式、禁用Babel模块转换、启用usedExports）、明确声明sideEffects。
Tree Shaking 不是靠背概念学会的，得在写代码、看打包结果、调配置的过程中真正理解它“什么时候起作用”和“为什么没起作用”。核心就三点：写对语法、配对工具、看清结果。
用 ES Module 语法写代码
这是 Tree Shaking 能工作的唯一前提。import/export 必须出现在顶层，不能包裹在函数或条件里；路径必须是字符串字面量，不能拼接变量。
- ✅ 正确写法：
import { debounce } from 'lodash-es';（注意是 lodash-es，不是 lodash） - ❌ 错误写法：
const utils = require('lodash');或import * as _ from 'lodash'; - 命名导出优于默认导出：用
export const foo = () => {}，别用export default { foo }，后者整个对象会被当成一个整体保留
配置构建工具识别无用导出
Webpack、Vite、Rollup 默认在 production 模式下启用基础 Tree Shaking，但需确认关键项没被覆盖：
- 确保
mode: 'production'已设置（Webpack）或使用生产构建命令（Vite 的vite build） - 关闭 Babel 的模块转换：
{ "presets": [["@babel/preset-env", { "modules": false }]] }，否则 import/export 会被转成 require，直接废掉 Tree Shaking - 开启
usedExports: true（Webpack）或确认 Rollup/Vite 默认启用该逻辑，让工具标记每个导出是否被引用
声明副作用，避免误删
有些文件虽然没被 import，但执行时会影响全局（比如注入 CSS、注册全局指令），这类代码不能被摇掉。需在 package.json 中明确说明：
- 完全无副作用（纯工具函数库）：
"sideEffects": false - 仅部分文件有副作用：
"sideEffects": ["./src/index.js", "*.css"] - 不写 sideEffects 字段，工具会默认认为所有文件都有副作用，Tree Shaking 基本失效
验证效果，别只信配置
配置写完不等于生效。最直接的方式是生成分析报告：
- Webpack：加
stats: 'verbose'或用webpack-bundle-analyzer查看哪些模块被引入但未使用 - Vite：运行
vite build --report生成report.html，点开看模块引用链 - 手动测试：删掉某处 import，观察打包体积是否下降；或故意只用
import { ref } from 'vue'，确认computed等没被引入的 API 没进包
