UD5工具箱
依赖树可视化
以交互式树状图的形式展示组件的完整依赖关系。每个节点代表一个组件或依赖库，节点大小与体积成正比。依赖树支持展开和折叠操作，可以逐层深入查看子依赖的详细信息。树状图使用不同颜色区分组件类型：框架内置组件、第三方库和项目内部组件分别以不同颜色显示。支持缩放和平移操作，即使在依赖关系非常复杂的场景下也能清晰展示。
体积占比分析
以饼图和堆叠条形图的形式展示各组件的体积占比。饼图展示顶层组件的体积比例，帮助开发者快速识别体积最大的组件。堆叠条形图展示每个组件的自身体积和子依赖体积的构成，帮助区分组件自身代码量和引入的第三方库体积。支持按体积大小排序和筛选，可以只显示体积超过特定阈值的组件。所有图表支持悬停查看详细数据，包括精确的体积数值和百分比。
多种数据输入方式
支持三种数据输入方式：手动输入模式允许开发者直接在编辑器中输入组件的 import 语句和依赖关系；示例数据模式提供预设的 React 和 Vue 项目依赖数据，方便快速体验；JSON 导入模式支持从 webpack-bundle-analyzer、source-map-explorer 等工具导出的分析报告中导入数据。三种输入方式覆盖了不同的使用场景，无论是学习体验还是实际项目分析都能满足需求。
优化建议生成
根据组件体积分析结果，工具会自动生成针对性的优化建议。包括：推荐使用体积更小的替代库（如用 dayjs 替代 moment.js）、建议开启按需导入功能（如 Element UI、Ant Design 等组件库的按需加载）、识别重复依赖并建议统一版本、标记可以使用动态导入（import()）进行代码分割的组件。优化建议按优先级排序，体积影响最大的优化点排在最前面，帮助开发者高效地进行体积优化。
详细数据表格
提供完整的组件数据表格，包含每个组件的名称、版本、自身体积、累计体积、占比、依赖数量、依赖深度等详细信息。表格支持按任意列排序，方便从不同维度分析组件数据。支持搜索和筛选功能，可以快速定位到特定的组件。表格数据可以导出为 CSV 格式，方便在 Excel 或其他分析工具中进一步处理。数据表格为开发者的决策提供了精确的数据支撑。
版本对比分析
支持两个不同版本的组件依赖数据进行对比分析。以并排的树状图和差异表格的形式展示两个版本之间的变化：新增的依赖以绿色标记、删除的依赖以红色标记、体积变化的依赖以橙色标记。版本对比功能帮助开发者了解每次依赖更新对整体体积的影响，及时发现异常的体积增长。在项目的持续集成流程中，版本对比功能可以作为自动化的体积监控工具。
高级功能
本工具还提供了多项高级功能：支持 Tree Shaking 效果模拟，展示开启和关闭 Tree Shaking 对组件体积的影响；提供按需导入分析，识别哪些组件库支持按需导入以及按需导入后的体积节省量；支持重复依赖检测，找出项目中被多个依赖间接引入的重复库；提供 gzip 和 brotli 压缩后的体积估算，帮助开发者了解实际传输大小。这些高级功能让本工具成为前端包体积优化的全方位分析平台。