Performance when the amount of stories and your code grows...

[jrmyio]

I am currently trying to optimize my build speeds. When I have 2 stories that use a total of 3 sass files (for example a.scss, b.scss, c.scss) and some react code, I am looking at a build time of 1 - 1.4 seconds whenever I make a change to a.scss.

However, when I add more stories that each have their own react components and their own sass files, the build time of a change to a.scss suddenly becomes 2-3 seconds whereas no code of the added stories is actually re-using a.scss.

Why does adding standalone code slow down other standalone code?

In other words, how can I prevent react-storybook from becoming slower when I continue to add standalone components/styles?

[ndelangen]

#678 We should investigate pre-bundling storybook and using the DLL plugin.

@serut has some experience with this. I'll do this eventually if no-one else makes a PR first.. 🙇

[serut]

We tried to setup storybook v3 with our app but it crashes, it just ignores the DLLReferencePlugin and try to compile the entire app, until a Not enough memory happens.
And I don't have time to investigate... 😭
We have ~30k JS code with 70 internal modules (we use npm link)

[jrmyio]

Since storybook manages the entries of webpack, wouldn't it be an idea to run each story on its own process?

I currently see no other way than uncommenting all stories I am not actively work on, just to keep the stuff I am working on, update quickly.

Storybook description says: "This allows you to develop UI components in isolation,". However it's really just the UI that is in isolation not the actual build process.

[ndelangen]

@ConneXNL That's the truth currently.

I'd be very interested to know how you'd approach to do this:

Since storybook manages the entries of webpack, wouldn't it be an idea to run each story on its own process?

[jchook]

Could this be accomplished by setting each story (or anthology of stories) as it's own webpack build target? The storybook nav could "hard" link to an individual HTML page for each story. Common libs could use the DllReferencePlugin or similar.

On a related note, Microsoft released Napa.js recently, which allows multithreading.