以下通过几种方式进行对比：
- 市场满意度
- 前端框架支持
- 上手难度
- 编译构建
- 可视化效果
- 场景使用多元化
- 总结
市场满意度：
从对比图中可以看出storybook更为稳定，但体量更大
| 产品 | 创建时间 | 市场认可度（star） | 下载量 | 包体积 |
|---|---|---|---|---|
| storybook | *6年 | *65540 | *90k+ | 990.5kb |
| dumi | 2年 | 1815 | 2k+ | *17.6kb |
前端框架支持：
以三大开发框架为例：
| 产品 | React | Vue | Angular |
|---|---|---|---|
| storybook | ✓ | ✓ | ✓ |
| dumi | ✓ | x | x |
*storybook支持更为全面技术栈的组件展示
上手难度
- 常规： storybook和dumi都是开箱即用
# Starts Storybook in development mode
yarn storybook
$ npx @umijs/create-dumi-app
# or
$ yarn create @umijs/dumi-app
- 进阶： 不同插件的支持使得每个产品的效果不同
编译构建
- storybook 预览环境整体基于 Webpack 构建，开发环境接近实际生产环境；
- dumi 基于father-build 构建， 打包编译的自由度略逊色于storybook
可视化效果
- storybook 展示环境实时可交互
- dumi 更偏向于文档友好可视化
场景使用多元化
- storybook 更像是一个画布，也像一个系统，可以做任何你想展示的东西
- dumi 是一款为组件开发场景而生的文档工具，并且支持移动端的组件展示
总结
- 如果你需要动态展示组件效果，把组件库做成一个系统做一些基于组件的可视化展示，并且可以支持多技术栈的组件展示，那么storybook是最佳的选择；
- 如果你是需要一个体量很轻，快速开发一个组件可视化的教学文档，专注于组件和组件文档的展示说明，并且是基于React栈，那么dumi是一个好的选择。
无论是选择什么框架作为组件开发，插件的使用会使你的文档如虎添翼。
