ladle是React生态系统中Storybook 的替代：是基于 Vite，即时服务器启动，生产构建速度提高 4 倍，占用空间减少 20 倍，代码拆分，快速刷新，单一依赖和命令，无需配置。
现在所有浏览器和 Node.js 都原生支持 ES 模块。我们不再需要为这两者捆绑我们的组件了。
这导致Storybook 和其他基于Webpack环境的需求放缓。
Storybook 在某些领域的表现不如希望的那样好：
- 生产构建时间——通常是我们 CI 中最慢的部分
- 开发模式启动时间- 并不总是比相关的产品应用程序快
- 捆绑输出-托管存储+缓慢的初始交互时间
- 维护- 我们重新打包了 Storybook、它的依赖项和配置，以便为我们的开发人员提供无缝设置；但是，插件版本控制和 monorepo 设置使维护变得困难
- testing - 对于我们的自动化视觉测试，我们需要在单独的过程中抓取和解析故事，因为 Storybook 不导出故事的静态列表（和其他元数据）
ladle是围绕Vite构建的。它直接为浏览器提供模块，并在依赖项需要捆绑时使用快速esbuild。
使用Base Web对 Ladle 和最新的 Storybook v6.4.19 进行基准测试：生产构建速度提高 4 倍。
还有另一个改进 -使用 Ladle 热重载不到 100 毫秒并保留状态。Storybook 大约需要2.5 秒，并且不保留状态。
我们还关心包大小和浏览器最初必须下载的资源量：
- ladle构建文件夹为4.6 MB，而 Storybook 为 16.1 MB
- Ladle 下载388 kB资源以打开默认故事，Storybook 14.3 MB
Ladle 是一个单一的包和命令。它易于安装和设置 - 无需配置。其他一些功能：
- 支持控件、链接、深色主题、RTL 和预览模式
- 内置插件始终通过 URL 保存状态 - 对测试很有用
- A11y 和键盘友好
- 响应式，无 iframe
- 默认启用代码拆分和 React 快速刷新
- 导出meta.json包含故事列表和其他元数据的文件
- 程序化 API，因此可以轻松重新打包
Ladle为开发、共享和测试你的 React 组件提供一个明显更快的环境。