Tree Shaking 能剔除未使用的第三方包代码，但需满足三要素：使用 ES 模块语法（import/export）、库提供 ESM 入口（如 package.json 中的 "module" 或 "exports.import"）、构建配置正确（sideEffects 声明、按需导入插件配合），并经产物验证生效。
Tree Shaking 能剔除未使用的第三方包代码，但不是自动发生的——它依赖你写的导入方式、库本身的模块结构，以及构建工具的配置是否协同到位。
确保用对导入语法和库版本
只使用 ES 模块语法（import/export），避免 require 或默认整体导入：
- ✅ 推荐：
import { debounce } from 'lodash-es'——lodash-es是专为 Tree Shaking 设计的 ESM 版本 - ❌ 避免：
import _ from 'lodash'或const { throttle } = require('lodash')—— 这两种都会引入整个包 - 检查库的
package.json：确认有"module"字段（如"module": "dist/index.esm.js"）或"exports"中定义了"import"入口
按需导入 + 官方插件配合
对 UI 组件库这类“大而全”的包，仅靠具名导入还不够稳定，需搭配生态插件：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- Vue 项目推荐
unplugin-vue-components+unplugin-auto-import：自动解析模板中用到的组件/API，只引入对应模块 - React 项目可用
babel-plugin-import（如 antd）或 Vite 插件vite-plugin-imp，把import { Button } from 'antd'编译成import Button from 'antd/es/button' - 避免在
main.js全局注册整个库（如app.use(ElementPlus)），这会让所有子模块被标记为“已使用”
声明副作用，帮打包器做安全判断
如果第三方包里含样式、polyfill 或初始化逻辑，打包器会因担心“执行副作用”而不敢删——你需要明确告诉它哪些是纯模块：
立即学习“Java免费学习笔记（深入）”；
- 在你自己的项目
package.json中设置："sideEffects": ["*.css", "*.scss", "*.vue"] - 若用了某库的独立 CSS（如
import 'element-plus/theme-chalk/base.css'），必须把它列进sideEffects，否则可能被误删 - 不加
sideEffects或设为false，会导致样式丢失或功能异常；设得太宽泛（如["*.js"]），又会让 Tree Shaking 失效
验证是否真正生效
别只看文档或体积数字，直接查产物：
- Vite 项目运行
vite build --report，打开dist/report.html查找组件名（如ElDialog），确认没出现在依赖图中 - Webpack 项目装
webpack-bundle-analyzer，交互式查看每个 chunk 包含哪些模块 - 在浏览器开发者工具的 Sources 面板搜索一个你确定没引入的函数名（如
throttle），搜不到才说明真被剔除了
