Tree Shaking 能显著减小开源工具库体积，但需库支持ESM、正确配置构建工具、采用具名导入；验证需检查产物文件或使用 webpack-bundle-analyzer。
Tree Shaking 能显著减小开源工具库的引入体积，但前提是库本身支持、项目配置正确、引入方式合理。它不是自动生效的“开关”，而是一套协同工作的机制。
确认工具库是否真正支持 Tree Shaking
关键看它是否提供标准的 ES 模块（ESM）入口，并明确声明副作用行为：
- 检查库的 package.json 中是否有
"module": "esm/index.js"字段——这是构建工具识别 ESM 的依据 - 查看
"sideEffects"字段：值为false表示无副作用，可安全摇除；若为数组（如 Element Plus 的["*.css", "dist/*"]），说明仅这些文件需保留，其余可摇 - 避免使用只提供
"main"（指向 CJS）的旧版库，例如普通lodash不支持摇，必须换用lodash-es
采用正确的引入写法
导入方式直接影响能否触发静态分析：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
- ✅ 推荐具名导入：
import { debounce, throttle } from 'lodash-es';—— 工具能精准识别哪些函数被调用 - ❌ 避免默认导入整个对象：
import _ from 'lodash-es'; _.debounce(...)—— 构建工具无法追踪属性访问，可能保留全部 - ❌ 禁用命名空间导入：
import * as utils from './helpers';—— 即使没访问任何属性，部分工具仍保守保留整个模块 - UI 组件库同理：用
import { ElButton } from 'element-plus';，而非import ElementPlus from 'element-plus';
确保构建工具启用并适配
即使代码写对了，工具链没配好也白搭：
立即学习“Java免费学习笔记（深入）”；
- Webpack：必须设
mode: 'production'，并开启optimization.usedExports: true；若库无副作用，可配sideEffects: false - Vite / Next.js / Rollup：默认启用 Tree Shaking，但需确认未被插件干扰（如某些 Babel 插件将
import转成require） - 禁用破坏 ESM 的转译：Babel 中关闭
@babel/preset-env的modules: 'commonjs'
验证是否真的生效
别只信文档，动手验证最可靠：
- 构建后打开产物文件（如
dist/main.js），搜索你没使用的函数名，确认未出现 - 用
webpack-bundle-analyzer可视化依赖图，定位冗余模块 - 做对照实验：在入口加一行
import { unusedHelper } from 'xxx';，观察构建体积是否增加——不增加，说明摇成功了
