UD5工具箱
工具提供三种预设对比场景，覆盖从前端库到大型应用的各种规模。小型库场景模拟发布 npm 包的场景，关注产物体积和 Tree-shaking 效率。中型应用场景模拟单页应用开发，关注开发体验和构建速度。大型企业项目场景模拟包含微前端和大量依赖的复杂系统，关注构建性能和模块拆分能力。
每种场景都包含详细的指标对比：Bundle Size 反映最终产物的体积，直接影响用户加载速度；Gzip Size 反映压缩后的体积，是网络传输的实际大小；Build Time 反映生产构建速度，影响 CI/CD 效率；Dev Startup 反映开发环境启动速度；HMR Speed 反映热更新速度，影响开发体验；Tree-shaking 效率反映去除未使用代码的能力。
Tree-shaking 深度对比功能以 lodash-es 为例，展示三种工具在导入整个库但只使用 3 个函数时的去除效果。Webpack 使用 Harmony 模块格式，部分依赖可能无法完全去除；Rollup 使用 ESM 格式，Tree-shaking 效率最高；Vite 在开发模式下使用 ESM，生产模式使用 Rollup，效果介于两者之间。评分系统综合所有维度给出总分和推荐建议。
每种对比场景都模拟了真实的项目结构。小型库场景包含核心模块、工具函数、类型定义和少量依赖，模拟发布 npm 包的构建需求。中型应用场景包含路由、状态管理、UI 组件库和 API 客户端，模拟典型的 React/Vue SPA。大型企业场景包含微前端子应用、共享依赖、构建时插件和大量第三方库，模拟复杂的企业级系统。场景中的代码量、依赖数量和模块复杂度都经过精心设计，确保对比数据具有实际参考价值。项目规模系数滑块允许在基准规模的基础上进行缩放，观察不同规模下各工具的表现变化趋势。评分系统综合体积、速度、效率、生态等多个维度给出总分，并提供针对性的推荐建议。