Tree Shaking 是基于 ES6 模块静态分析的未使用代码移除机制，需满足使用 import/export、工具正确配置、无副作用干扰等前提，并通过具名导出、按需引入等方式优化代码写法以提升效果。
Tree Shaking 是 JavaScript 打包工具（如 Webpack、Rollup、Vite）在构建时自动识别并移除未使用代码的优化机制，核心前提是基于 ES6 模块的静态结构特性——导入导出关系在编译期就可确定，因此能安全地“摇掉”那些从未被引用的导出（export）。
Tree Shaking 起作用的前提条件
它不是开箱即用的魔法，需要同时满足几个关键条件：
-
必须使用 ES6 模块语法（
import/export）：CommonJS（require/module.exports）是运行时动态加载，无法静态分析，Tree Shaking 对其无效 -
打包工具需启用相关配置：Webpack 5 默认开启（需设置
mode: "production"），Rollup 默认支持；若用 Babel 转译，要确保不把import/export转成require（禁用@babel/preset-env的modules: "commonjs"） -
代码不能有副作用（side effects）干扰判断：比如某个模块只是执行了全局赋值或监听事件，但没导出任何东西，又没被显式引入，它可能被误删。可通过
package.json中的"sideEffects": false或数组精确声明哪些文件有副作用
如何写利于 Tree Shaking 的代码
即使工具支持，代码写法也直接影响效果：
-
避免默认导出大量对象的“大杂烩”模块：比如
export default { a(), b(), c() }，使用者哪怕只调用utils.a，整个对象仍可能被打包进来。改用具名导出：export function a() {}、export function b() {} -
按需引入，而非整包引入：不要
import _ from 'lodash'，而用import { debounce } from 'lodash'（注意：Lodash 需搭配lodash-es才能真正生效，普通版经 Babel 处理后会退化为 CommonJS） -
避免对导入变量的“无意义引用”：比如
import { unusedFn } from './utils'; console.log('loaded');—— 这里unusedFn没被调用也没赋值，会被正确摇掉；但如果写成import * as utils from './utils';，且后续没访问utils.xxx，部分工具可能保守保留整个命名空间
验证 Tree Shaking 是否生效
别只信文档，动手确认最可靠：
立即学习“Java免费学习笔记（深入）”；
-
生成构建产物后手动检查：用 Webpack 可加
stats: "verbose"或使用webpack-bundle-analyzer可视化依赖图，看目标函数是否出现在最终 bundle 中 -
故意引入未使用导出，观察体积变化：比如在入口文件加一行
import { someUnusedHelper } from './helpers';，再构建对比大小——如果体积没变，说明它已被成功摇掉 -
Vite 用户可直接看
.vite/deps/缓存或生产构建后的dist/assets/文件内容，ESM 输出通常更透明，容易 grep 验证
基本上就这些。Tree Shaking 不复杂但容易忽略细节，关键是保持模块纯净、用对语法、配对工具。它不会帮你优化算法或压缩图片，但能把“写了却没用”的 JS 代码干净利落地剪掉。
