tree shaking 是一种构建时静态分析并移除未使用代码的优化技术，依赖 es6 模块的静态 import/export 特性，要求代码无副作用、导出可追踪且避免 commonjs 混用，否则无法安全摇除。
Tree Shaking 是一种在构建时静态分析并移除未使用代码（dead code）的优化技术，它依赖于 ES6 模块的静态结构特性（如 import/export），在 Webpack、Rollup、Vite 等现代打包工具中默认启用。要真正实现“纯净”的代码输出，关键不是开启 Tree Shaking 就完事，而是让代码本身可被安全摇掉——即满足静态可分析、无副作用、导出可追踪等前提。
确保使用 ES 模块语法（而非 CommonJS）
Tree Shaking 只对 import/export 生效，对 require/module.exports 无效，因为后者是运行时动态加载，无法在构建期静态判断依赖关系。
- ✅ 正确：用
export const utils = { foo() {} }或export function bar() {}，再通过import { bar } from './utils.js'按需引入 - ❌ 避免：在同一个文件里混用
module.exports = {...}或require('./x')，会中断模块链，导致整块模块无法被摇掉 - ⚠️ 注意：第三方库若用 CommonJS 发布（如早期 lodash），即使你用 ES import 写法，Webpack 也可能无法正确 shake —— 建议优先选 ESM 版本（如
lodash-es）
避免无意中产生副作用（side effects）
如果模块执行时有外部影响（如修改全局变量、调用 console、绑定事件、触发 API 请求），打包工具会保守地保留整个模块，即使只用了其中某个函数。
你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。 它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在
- ✅ 清洁写法：
export function add(a, b) { return a + b; }—— 纯函数，无副作用，可安全摇掉未引用部分 - ❌ 危险写法：
console.log('init'); export function add() {...}—— 模块顶层语句有副作用，默认会被视为不可摇 - ? 解决方案：在
package.json中显式声明"sideEffects": false（表示所有文件都无副作用），或列出例外（如["*.css", "src/entry.js"]）
导出方式要支持“可识别的命名导出”
Tree Shaking 更擅长处理具名导出（export function, export const），对默认导出（export default）和对象聚合导出（export default { a, b }）支持较弱，尤其当对象属性被动态访问时。
- ✅ 推荐：
export const A = () => {};+import { A } from './mod'; - ⚠️ 谨慎：
export default { A: () => {}, B: () => {} };—— 若通过mod.default.A访问，工具难以静态推断 A 是否被用到 - ? 小技巧：用
/*#__PURE__*/注释标记纯函数调用，帮助压缩器进一步识别（如/*#__PURE__*/ helper()）
验证是否真正生效
别只信配置，要亲眼看到结果：
- 用 Webpack 的
stats: 'verbose'或插件webpack-bundle-analyzer查看哪些模块被标记为 “unused exports” - 检查最终打包产物（如
dist/main.js）中是否还存在明显未引用的函数或类定义 - Vite 用户可加
build.rollupOptions.treeshake: 'safest'强化分析（但可能略微降低构建速度）
不复杂但容易忽略：Tree Shaking 不是魔法开关，它是代码组织方式、模块规范、构建配置三者协同的结果。写得“可摇”，配得“敢摇”，才能打出真正干净的包。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
