Uncovering the Performance Differences between Storybook and Ladle
As a staple in frontend projects, Storybook has enabled rapid development speed, higher-quality code, and seamless integration with design departments. However, its internal server’s speed has been a major drawback, especially when adding custom configurations or plugins. This is where Ladle comes in, a drop-in alternative built on top of Vite, using esbuild, and embracing ES modules.
A New Contender: Ladle
Ladle is marketed as a more performant alternative to Storybook, with promising benchmark results. However, these benchmarks only focused on large-sized projects, which may not represent all scenarios. To explore the performance differences between Ladle and Storybook in various project sizes, we conducted an experiment.
Methodology
We compared the performance of both tools using several metrics:
- Cold startup time
- Hot startup time
- Reload time
- Build size
We measured these metrics in three projects of different sizes, representing various stages of frontend projects:
- Basic project with two stories (small)
- React-bootstrap-typeahead with 47 stories (medium)
- Base Web with over 250 stories (large)
Results
Our experiment revealed significant performance gains by adopting Ladle over Storybook in all metrics, regardless of project size. The biggest difference in performance was found in large-scale projects, while medium-sized projects had fewer improvements, similar to small-sized projects.
Key Findings
- Ladle outperformed Storybook in cold startup time, hot startup time, and reload time.
- Build size was significantly smaller in Ladle, with a factor of 8.75x smaller than Storybook in the small-sized project.
- Medium-sized projects had the worst performance in reload time for both tools.
Takeaways
Our experiment demonstrated that Ladle is a viable alternative to Storybook, offering significant performance gains in various project sizes. While there are limitations to our experiment, the results enhance the performance-related statements from Ladle.
Future Work
To further improve our understanding of the performance differences between Ladle and Storybook, future experiments could include:
- More projects per category
- Expanding upon categories
- Performing more measurements per metric
By exploring the performance differences between Ladle and Storybook, we can make informed decisions about which tool to use in our frontend projects, ultimately leading to faster development speeds and higher-quality code.