Uncovering the Performance Differences between Storybook and Ladle
A New Contender: Ladle
Ladle is a drop-in alternative to Storybook, built on top of Vite, using esbuild, and embracing ES modules. It’s marketed as a more performant alternative to Storybook, with promising benchmark results.
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.
# Example of using Ladle in a project
npx ladle init my-project
cd my-project
npm run ladle
// Example of a Ladle configuration file
module.exports = {
// Ladle configuration options
stories: ['**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@ladle/react',
'@ladle/html',
],
};