How to make Storybook 2-4x faster
Optimize build performance for Storybook 7.6
Storybook 7.6 contains massive performance improvements. Most will become the default in our next major release (Storybook 8.0), but you can adopt them today by opting in manually. Hereโs how to get started!
โณ๏ธ --test
flag for 2-4x faster test builds
๐ฉบ 2.2x faster React docgen
๐งณ Streamline essential addons
๐ SWC for 50% faster Webpack projects
๐ฌ @storybook/test
for more streamlined and performant testing
2-4x faster builds with the --test
flag
If youโre building Storybook just for testing purposes, you can improve build speeds considerably by skipping processes like docgen analysis and docs compilation.
To help you do this, weโve introduced a new --test
flag for Storybook build
. It lets you create a stripped-down build that completes 2-4x faster than normal. This can be used with the Storybook Test Runner or Chromatic and will be the default for Chromatic Visual Test Addon.
Try your first test build by running:
npx storybook build --test
FAQ: Can I combine the --test
and --coverage
flags?
The --test
flag is designed to be as fast as possible, so it removes addons that are known to slow down build times and are unnecessary for functional tests.
One such addon is @storybook/addon-coverage
, which is used in conjunction with the Storybook Test Runner to collect coverage information for your stories.
If youโre using addon-coverage
and running Storybook Test Runner against your built Storybook, the --test
flag will strip out the coverage information. To configure the --test
build to keep coverage information (at the expense of a slightly slower build), update .storbyook/main.js
:
// main.ts|js
export default {
// ...
build: {
test: {
disabledAddons: [
'@storybook/addon-docs',
'@storybook/addon-essentials/docs',
],
},
},
}
2.2x faster React docgen
Generating documentation via TypeScript is extraordinary. It shows how to use your component without you needing to write any docs manually:
Storybook 7 analyzes React components using a tool called react-docgen-typescript
. It accurately parses out all your props based on outputs from the TypeScript compiler.
However, thereโs a catch: TypeScript is slow. Many modern tools like esbuild and Speedy Web Compiler (SWC) are fast precisely because they removed their TS dependency. In our tests, disabling TS-based docgen alone improved Storybook build speeds by 25% to 50%!
In Storybook 8, we will default to react-docgen
instead. Itโs based on simple AST processing and doesnโt use any TS, so itโs significantly faster. There are certain patterns that it doesnโt handle as well, but the speed is worth it in most cases.
Try this now in your Storybook 7.6 React project by using the following config:
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
framework: '@storybook/your-framework',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
typescript: {
reactDocgen: 'react-docgen', // or false if you don't need docgen at all
},
};
export default config;
Streamline addon-essentials
Storybookโs addon-docs
package lets you autogenerate docs or write them manually using MDX. These doc pages can include many components that all need bundling, which increases the bundle size and Storybookโs build times.
If youโre not using addon-docs
, you can remove it from addon-essentials
by using the configuration below. In our tests, this change alone improved Storybookโs build time by 25%.
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
stories: [
// make sure you don't have MDX entries
],
addons: [
// Before
// '@storybook/addon-essentials',
// After
{
name: '@storybook/addon-essentials',
options: { docs: false },
},
],
};
export default config;
Using Webpack? Enable SWC
In Storybook 7.6, you can cut the start times of Webpack projects by 50% or more by switching from Babel to SWC.
Storybook 7.6 sets SWC as default for all new Storybook Webpack projects (aside from Angular). It also fixes SWC support for Preact and React fast-refresh.
If using a Webpack-based framework, update your builder configuration in .storybook/main.ts
:
// .storybook/main.ts
import type { StorybookConfig } from '@storybook/your-framework';
const config: StorybookConfig = {
framework: {
name: '@storybook/your-framework', // react-webpack5|next|vue-webpack5|etc
options: { builder: { useSWC: true } }
}
};
Note: the --test
flag wonโt enable SWC by default. Thatโs because extra changes might be needed if youโre using Babel plugins (such as the Emotion plugin).
Two test packages for the price of one
Storybook 7.6 replaces the @storybook/jest
and @storybook/testing-library
packages with @storybook/test
. Itโs streamlined, smaller than before, and now based on Vitest rather than Jest. It pre-bundles all dependencies, which increases performance by giving the bundler less to do. In our example Mealdrop project, @storybook-test
quickened build times by 10%.
To get started, install the addon with your package manager:
# Install the addon with your package manager
npm install -D @storybook/test@next
pnpm add -D @storybook/test@next
yarn add -D @storybook/test@next
Then, update your stories:
- import { expect } from '@storybook/jest';
- import { within, userEvent } from '@storybook/testing-library';
+ import { within, userEvent, expect } from '@storybook/test';
In other news...
The road to Storybook 8.0 has begun
The first version of our next major release, Storybook 8.0, is now available for you to try in alpha. Upgrade by running npx storybook@next upgrade --prerelease
. In the months ahead, weโll be sharing all the goodness coming in 8.0. Follow us for updates on social media (Twitter/LinkedIn/Threads), GitHub or our newsletter, or check out the release plan:
Storybook for React Server Components
In the first of our Storybook 8.0 posts, we answered one of our communityโs most frequent requests: Storybook support for React Server Components. This experimental solution enables you to test RSCs inside Storybook, by rendering your server components in the client, and using mocks to simulate Node.
Chromatic Visual Test Addon reaches private beta
Over 1,000 devs are already signed up for early access to Chromatic Visual Test Addon, which brings 1-click visual tests to your Storybook. Learn more about the private beta and get it now!
Happy holidays!
Finally, weโd like to wish everyone a very happy holidays. 2023 has been a huge year for Storybook, and 2024 is set to be even stronger. Weโll be sharing a post next week about whatโs coming up for Storybook in 2024, so be sure to watch this space.
Thank you for being a part of Storybookโs community this year. We couldnโt do this without you!