Tree Shaking 减小第三方依赖体积需三方协同：库须为ESM格式（如lodash-es）、项目禁用Babel转译ESM、导入用具名语法（import { debounce }），并声明sideEffects以保样式等副作用文件。
Tree Shaking 要真正减小第三方依赖体积，关键不是“用了 import”，而是让构建工具能准确识别并剔除未使用的导出。这需要三方协同：库本身支持 ESM、项目配置不破坏静态结构、导入方式精准可分析。
用具名导入替代全量引入
全量引入会锁死整个模块，Tree Shaking 无法介入：
- ❌ 避免：
import _ from 'lodash'或import * as antd from 'antd'—— 工具只能保留全部导出 - ✅ 推荐：
import { debounce, throttle } from 'lodash-es'—— 构建器只打包这两个函数 - ⚠️ 注意：
import debounce from 'lodash/debounce'在 Webpack 5+ 中也有效，但前提是该子路径是独立 ESM 文件（需查 node_modules/lodash-es/package.json 的"exports"或"module"字段）
选对库的 ESM 版本，别被 CommonJS 坑了
即使你写对了 import，若库本身是 CommonJS 包，Tree Shaking 就形同虚设：
- 检查库的
package.json是否含"type": "module"或"module": "dist/index.esm.js" - ✅ 推荐替换：
lodash→lodash-es；moment→date-fns；bootstrap→bootstrap/dist/js/bootstrap.esm.js - ❌ 慎用：没声明 ESM 入口的 UI 库（如旧版 Ant Design），即使写了命名导入，内部仍可能因 UMD 包裹或动态逻辑失效
配合副作用声明，防止误删关键文件
有些第三方模块虽无导出，却有实际影响（如注入 CSS、注册全局组件），不声明副作用会被整块删除：
立即学习“Java免费学习笔记（深入）”；
- 在项目根目录
package.json中设置："sideEffects": ["*.css", "*.scss", "src/polyfill.js"] - 不要写
"sideEffects": false后又漏掉样式文件——否则import 'element-plus/theme-chalk/index.css'会被删，界面崩塌 - 避免在封装库的入口文件顶层执行副作用代码（如
ElementPlus.install()应由使用者显式调用，而非自动运行）
Vue/React 场景下补上模板层按需逻辑
JS 层导入再精准，模板里写 <el-button> 却没 import，构建工具照样无法关联：
- Vue 项目推荐用
unplugin-vue-components自动导入组件，无需手动import也能触发 Tree Shaking - React 可搭配
babel-plugin-import或unplugin-auto-import，把import { Button } from 'antd'自动转为import Button from 'antd/es/button' - 禁用 Babel 将 ESM 转成 CommonJS：在
@babel/preset-env中设modules: false，否则 import/export 会被降级，摇树失效
