树摇是打包工具在构建时移除未使用ES模块代码的优化机制，依赖静态分析，需满足ES模块语法、启用该功能、无副作用等条件，并可通过产物分析验证效果。
树摇（Tree Shaking）是 JavaScript 打包工具（如 Webpack、Rollup、Vite）在构建时自动移除未使用代码的优化机制，它依赖 ES 模块（import/export）的静态结构特性，不是运行时行为，也不是简单地删掉“看起来没用”的函数。
树摇生效的前提条件
只有满足以下几点，树摇才能真正起作用：
- 项目必须使用 ES 模块语法（
import和export），CommonJS（require/module.exports）不支持静态分析，无法被摇掉 - 打包工具需启用 tree shaking（Webpack 5+ 默认开启；Rollup 默认开启；Vite 基于 Rollup，也默认支持）
- 代码不能有副作用（side effects），否则工具会保守保留。比如直接执行的语句、全局变量赋值、
console.log等，可能阻止模块被剔除 - 确保
package.json中正确声明"sideEffects": false或精确列出有副作用的文件（如["*.css", "src/utils/init.js"]）
如何确认代码被成功摇掉？
最直接的方式是生成并分析打包产物：
- Webpack：加
--stats=verbose或用webpack-bundle-analyzer可视化查看哪些模块/导出未被引用 - Rollup/Vite：启用
build.rollupOptions.output.manualChunks或输出stats，配合插件如rollup-plugin-visualizer - 检查最终 bundle 中是否还存在你确定没调用的
export函数或类（可搜索源码关键字验证）
常见导致树摇失效的情况及应对
这些写法看似合理，却会让打包器“不敢”删除代码：
立即学习“Java免费学习笔记（深入）”；
-
动态 import() + 字符串拼接：如
import(`./pages/${page}.js`)—— 路径不固定，工具无法静态判断，整个模块会被保留 -
重命名导入但未使用：如
import { foo as bar } from './utils';却没用bar—— 仍算作“已导入”，但若foo是命名导出且无其他引用，通常仍可被摇（取决于工具实现） -
默认导出对象含多个方法，只用其中一个：ESM 不支持“部分解构摇”，整个对象导出不会被拆开；建议改用命名导出（
export const fn1 = ...; export const fn2 = ...;） -
第三方库用了 CommonJS 或 UMD：例如
lodash整包引入（import _ from 'lodash'）就很难摇；应改用按需导入（import debounce from 'lodash/debounce'）或搭配babel-plugin-lodash
主动辅助树摇的小技巧
除了写法规范，还可以主动帮打包器做判断：
- 避免在模块顶层写执行逻辑（如直接调用函数、修改 window），除非明确需要副作用
- 对工具库模块显式标记
/*#__PURE__*/注释，提示压缩器该调用可安全移除（如/*#__PURE__*/ console.log('debug')） - 使用
export * from 'xxx'时谨慎——它会 re-export 所有内容，可能引入冗余导出；优先显式列出需要的项 - 开发阶段用
eslint-plugin-tree-shaking提前发现潜在问题（如未使用的导出、不可达的 export default）
基本上就这些。树摇不是黑魔法，核心是“静态可分析 + 无副作用 + 正确模块语法”。写清楚、导出明确、引入克制，剩下的交给打包器就好。
