tree shaking 依赖 es module 静态导入导出、显式声明 sideeffects、构建工具启用 usedexports 与 minimize 优化，并需验证未使用导出是否被真正移除。
ES Module 是 Tree Shaking 能起作用的底层前提——它让打包工具能在不运行代码的情况下，准确知道“谁导出了什么”“谁导入了什么”，从而安全地删掉没被用到的部分。
必须用静态 import/export 语法
Tree Shaking 只识别 ES 模块的顶层 import 和 export 语句。这些语句在解析阶段就能确定依赖关系，不需要执行代码。
- ✅ 支持 shaking：
import { debounce } from 'lodash-es';或export const utils = () => {}; - ❌ 不支持 shaking：
const _ = require('lodash');、import('./dynamic.js')（动态导入是运行时行为）、import * as mod from './utils'（全量导入会阻断分析）
避免副作用，明确声明 sideEffects
即使某个函数没被引用，如果构建工具怀疑它执行时会修改全局状态（比如打补丁、注册事件、写 CSS），就不会删——除非你主动说明“这些文件没副作用”。
- 在 package.json 中加：
"sideEffects": false→ 整个包可放心摇 - 若只有部分文件有副作用（如 CSS、SVG）：
"sideEffects": ["*.css", "*.scss", "src/legacy-polyfill.js"] - 不写该字段，默认视为
true，工具会保守处理，跳过 shaking
确保构建流程启用相关优化
Tree Shaking 不是“写了 ES Module 就自动生效”，它需要打包工具在正确配置下完成两步：标记（usedExports）+ 删除（minimize）。
-
Webpack：必须设
mode: 'production'，它会默认开启usedExports: true和minimize: true -
Rollup / Vite：默认开启；但若用了
export * from或eval类代码，可能干扰分析 - Terser 等压缩器负责最终剔除被标记为未使用的函数和变量，
console.log不会被 shake，需靠压缩阶段清理
验证是否真正生效
别只看 bundle 大小——压缩可能掩盖结果。要确认 shaking 是否工作，得查中间状态：
- Webpack 加
--stats=verbose，搜索usedExports: true和模块里unused export的提示 - 用 Webpack Bundle Analyzer 查看依赖图，确认未引入的函数没出现在 chunk 里
- 手动测试：写一个只
export不import的函数，构建后在输出文件中搜它的名字，搜不到就说明成功了
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
