Tree Shaking 剔除未用 UI 组件需满足：ES 模块语法、构建工具静态分析、按需导入、正确配置 sideEffects，并通过可视化工具验证效果。
Tree Shaking 能剔除未使用的 UI 组件代码，但前提是这些组件必须以 ES 模块方式导出和导入，且调用关系在编译期可静态分析。它不是自动生效的“魔法”，而是依赖模块语法 + 构建工具（如 Webpack、Vite、Rollup）的静态分析能力。
确保 UI 组件使用 ES 模块语法
CommonJS（module.exports / require）无法被 Tree Shaking，因为其导入是动态的。UI 组件库必须提供 export 语法的模块版本：
- ✅ 正确：使用
export const Button = ...或export default Button - ❌ 避免：仅提供
module.exports = { Button }的 UMD/CommonJS 入口 - 建议在
package.json中明确指定"type": "module"或通过"exports"字段指向 ESM 入口，例如："exports": { ".": { "import": "./dist/index.js" } }
按需导入，避免默认整体引入
直接 import UI from 'ui-lib' 通常会引入整个包（即使内部是 ESM），导致 Tree Shaking 失效。应显式导入所需组件：
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
- ✅ 推荐：
import { Button, Icon } from 'ui-lib'（前提是库支持命名导出） - ✅ 更稳妥：
import Button from 'ui-lib/Button'（路径导入，绕过入口文件） - ❌ 少用：
import * as UI from 'ui-lib'或import UI from 'ui-lib'（阻碍静态分析）
禁用副作用（sideEffects），让构建工具放心删代码
如果 UI 组件模块中没有执行顶层副作用（如直接调用 console.log、修改全局变量、注册插件等），应在 package.json 中声明："sideEffects": false
若部分文件有副作用（如样式文件、polyfill），可精确列出："sideEffects": ["*.css", "*.scss"]
否则构建工具会保守保留所有导入，哪怕没被调用。
立即学习“Java免费学习笔记（深入）”；
检查构建输出并验证是否生效
Tree Shaking 是否起作用不能只靠猜测，要实际验证：
- 使用
webpack-bundle-analyzer（Webpack）或vite-plugin-visualizer（Vite）生成依赖图谱，查看未使用组件是否出现在最终 chunk 中 - 搜索打包后的
.js文件，确认未导入的组件名（如Dialog、Slider）是否完全不存在 - 注意：Babel 若将
export编译为module.exports，会破坏 Tree Shaking —— 确保 Babel 不处理node_modules，或配置ignore: /node_modules/
