Storybook: [5.0.0] Web building slow

[jniemin]

Describe the bug
I have an app build with create-react-app. Upgrading @storybook/react from 4.1.13 to 5.0.0 increased webpack build time from 500ms to 5000ms. Initial startup was increased from 8s to 11s, but the bigger issues is that while doing small change to code completion time went 10 fold.

To Reproduce
Steps to reproduce the behavior:

1. Start storybook
2. Make modification to existing code
3. See webpack build time from command line

Expected behavior
No increase built time

System:

• OS: MacOS
• Framework: React 16.8.4, Create-react-app 2.1.5
• Addons: No addons

[shilman]

Any chance you can provide a repro repo?

[jniemin]

Unfortunately it's private repo. I'll see if I can create custom repo that reproduces the issue

[jniemin]

I created a new create-react-app and added storybook as dependency. With quick test I saw some 20-30ms longer built times with 5.0.0. Not sure if the difference grows bigger when project gets bigger.

[jniemin]

I finally had time to dig bit deeper on this. Seems that it's all about our create-react-app and typescript that causes the slow compilation times. Only thing I wonder is that why it increased dramatically between v4 and v5 of storybook. Code and build configuration was same on both versions

[shilman]

@jniemin Thanks for taking a look at this. I've seen other issues mentioning performance issues with typescript. I'm wondering whether this problem got worse due to changes we made in 5.0 that changed the way webpack is configured (see https://github.com/storybooks/storybook/issues/6081 for an umbrella issue)

[jniemin]

It seemed to got worse upgrading from 4->5, since build time was increase about 5 second in our system and only change we had was upgrading storybook. Our project is medium to large sized.

To fix typescript slowness I upgraded create-react-app to 2.1.8 (https://github.com/facebook/create-react-app/issues/5820) which enabled async type checking by default and also set in our tsconfig "skipLibCheck": true. Now we are back at where we were with 4.1.13 version.

[Andersos]

I´m also seeing slower build times but Im not using Typescript.
This is the repo and it is now on storybook 5 https://github.com/getas/styleguide

The version Im comparing to running Storybook 4 only changing these dependencies
yarn add @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected] @storybook/[email protected]

$ yarn build-storybook (version 4)
✨ Done in 19.00s.
✨ Done in 5.38s.
✨ Done in 5.62s.

$ yarn build-storybook (verison 5)
✨ Done in 32.10s.
✨ Done in 7.80s.
✨ Done in 7.69s.

It looks like there are improvements from first time to the second and third time running the script after eachother. But also it looks to me that the build times have increased.

[steffenmllr]

Same here we went from 40sek to over 2 minutes for the initial build and 2-15sek for the rebuild. Thinking about switching back to 4.x. I'm using babel with typescript.

[shilman]

@steffenmllr @jniemin Anybody who's using typescript, please take a look at this issue for a possible fix: https://github.com/storybooks/storybook/issues/6430

TLDR; you should be using react-docgen-typescript-loader instead of react-docgen-typescript-webpack-plugin

[steffenmllr]

thanks for the hint but I'm not using react-docgen-typescript or react-docgen-typescript-webpack-plugin.

[shilman]

Ugh, sorry to hear that. @ndelangen any performance hints for @steffenmllr ?

[shilman]

For anybody who is interested in performance and doing any webpack customization, it's important to understand the webpack configuration. I added a --debug-webpack flag to print out the manager & preview webpack configs. Please take a look and see what's being applied in 5.x vs 4.x and this will most likely explain the performance differences.

If it's getting slower without any webpack customization, please let us know!

[jniemin]

@shilman Like I wrote in my previous comment, this helped for our project to get back to decent build times.

To fix typescript slowness I upgraded create-react-app to 2.1.8 (facebook/create-react-app#5820) which enabled async type checking by default and also set in our tsconfig "skipLibCheck": true.

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[nonameolsson]

I can agree that it is very slow. I haven't used Storybook v4, only the latest one.

[shilman]

@nonameolsson are you using typescript? did you use the workaround here?

[KamalAman]

I am using native javascript and finding the same issue. I did a performance profile and I see the the culprit is storybook-addon-react-docgen which uses react-docgen underneath.

It seems like framework-preset-react-docgen.js adds the plugin into the bundle process. If I add an early return to framework-preset file (and not use docgen) then my storybook build time drops from 4 minutes to 40 seconds.

It seems like docgen is running on files that are not jsx including all file in node_modules.

Close up inspection of visitingChildren

In addition, I don't understand why docgen is needed, I am not using the prop addon for storybook. Can we skip adding it by default or provide a way to disable it?

[hjnilsson]

@KamalAman Is there any way to add this early return without modifying storybook itself? The build times are crippling use of storybook in our project.

[shilman]

@KamalAman Thanks for the detailed report. We've recently started shipping presets to make it easy to configure storybook for common use cases (e.g. add typescript or scss). I think docgen could be good candidate for that for 6.0 (this will be a breaking change). I'm also thinking maybe the current default is not configured properly if it's also running on node_modules and all JS files... cc @igor-dv

[shilman]

On a related note @jessepinho and @leoyli also went through the perf debugging process for typescript and found that things sped up dramatically when he used babel to handle typescript instead of awesome-ts-loader. Referencing them so they can add some color here.

Also cc @mrmckeb who is working on turning the CRA config into a preset. Maybe we can make the docgen stuff opt-out in the process somehow? (And maybe opt-in in 6.0?!)

[mrmckeb]

Yes, so the CRA preset doesn't include doc-gen at all, and I thought about that yesterday and will make it opt-in I think.

So the preset would include doc-gen for JS and TS, and you just need to turn it on. Sound fair?

[shilman]

I'm not sure about opt-out vs opt-in but we can start with opt-in. Seems like ts loading is also a pain point. Any thoughts on that?

[mrmckeb]

@shilman, it shouldn't be... we are using TS with React on several projects in my company and don't have performance issues - as CRA is already using the babel-loader. So the preset I'm working on should be immune to these issues!

[KamalAman]

@hjnilsson I added the following as a pre storybook npm script hook. It adds an early return to the docgen present :(

prestorybook: node ./make-storybook-faster.js

make-stroybook-faster.js

const replace = require('replace-in-file');

replace.sync({
  files: 'node_modules/@storybook/react/dist/server/framework-preset-react-docgen.js',
  from: /^function babel\(config\) \{.*/m,
  to: 'function babel(config) { return config;',
});

Building storybook my ci server went from 10 min to ~2min

It still modifies storybook, but in an automated way.
No Guarantees!

[macrozone]

@hjnilsson I added the following as a pre storybook npm script hook. It adds an early return to the docgen present :(

prestorybook: node ./make-storybook-faster.js

make-stroybook-faster.js

const replace = require('replace-in-file');

replace.sync({
  files: 'node_modules/@storybook/react/dist/server/framework-preset-react-docgen.js',
  from: /^function babel\(config\) \{.*/m,
  to: 'function babel(config) { return config;',
});

Building storybook my ci server went from 10 min to ~2min

It still modifies storybook, but in an automated way.
No Guarantees!

did not work for me, rebuilding on changed file still takes > 10seconds, which is too long for hot module reload

Edit: i am using https://www.manuel-schoebel.com/blog/nextjs-typescript-storybook-setup

EDIT (solved):

use this:

module.exports = ({ config, mode }) => {
config.module.rules.push({
  test: /\.(ts|tsx)$/,
  loader: require.resolve('babel-loader'),
  options: {
    presets: [['react-app', { flow: false, typescript: true }]],
  },
});
config.resolve.extensions.push('.ts', '.tsx');
return config;
};

the first setup mentioned on https://storybook.js.org/docs/configurations/typescript-config/ does not work however

~EDIT: damn, this seems to break hot reload! When i do a change, it seems to do something ( webpack built 8e0b406518a26a3866c5 in 1781ms) , but it does not reload storybook. Also a page refresh does nothing :-((~ nevermind, it works after restart

[bote795]

I am using native javascript and finding the same issue. I did a performance profile and I see the the culprit is storybook-addon-react-docgen which uses react-docgen underneath.

It seems like framework-preset-react-docgen.js adds the plugin into the bundle process. If I add an early return to framework-preset file (and not use docgen) then my storybook build time drops from 4 minutes to 40 seconds.

It seems like docgen is running on files that are not jsx including all file in node_modules.

Close up inspection of visitingChildren

In addition, I don't understand why docgen is needed, I am not using the prop addon for storybook. Can we skip adding it by default or provide a way to disable it?

@KamalAman
sorry, but how were you able to get the profiling setup, I am building with build-storybook but I can't pass in --inspect-brk to be able to attach the browser to do a profile (sorry if this is off topic) my build takes a while and trying to debug why

[KamalAman]

@bote795 execute:

node --inspect ./node_modules/@storybook/react/bin/index.js for v5.1.3

Open chrome to chrome://inspect and debug from there

[matheo]

@shilman I perceive a speed improvement in the build time of the latest 6.0.0-apha, but I wonder if there will be improvements loading huge projects. Currently, the size of my main bundle is 25Mb, with vendors it's up to 32Mb, so it would be good to have some kind of lazy-loading of the Stories per Category, so we can improve the UX and loading times.

WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
WARN This can impact web performance.
WARN Assets: 
WARN   main.5fdb7cf69b08b6df3f69.bundle.js (18.4 MiB)
WARN   vendors~main.5fdb7cf69b08b6df3f69.bundle.js (7.13 MiB)
WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
WARN Entrypoints:
WARN   main (25.5 MiB)
WARN       runtime~main.5fdb7cf69b08b6df3f69.bundle.js
WARN       vendors~main.5fdb7cf69b08b6df3f69.bundle.js
WARN       main.5fdb7cf69b08b6df3f69.bundle.js
WARN 
WARN webpack performance recommendations: 
WARN You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
WARN For more info visit https://webpack.js.org/guides/code-splitting/

Thanks in advance!

[shilman]

@matheo yeah we're working on a variety of related projects. I don't have numbers yet but 6.0 will include some massive perf improvements for large storybooks, and will hopefully be available in upcoming alphas in a week or two.

[KamalAman]

I'm am definitely seeing more stable start-storybook build and decreased build time in 6.0.0-beta.0, so KUDOs!!!

The places where I am noticing slow downs are:

• initial load of the storybook site, after the sidebar loads storybook is in the loading state for 20ish seconds.
• build-storybook crashes to due running out of memory when minifying the code which did not happen for me in v5 6408

[jayair]

Hi all, I recently upgraded from 5 to 6.0.13 and Storybook is unusably slow.

I'm using Safari. A large number of stories are using the storiesOf API.

Here are some of the problems I'm noticing:

• The initial load takes 22s
• Making a small change causes the browser to freeze for at least 5s
• After a few minutes, Safari shows the notice that the browser window is taking too much memory and the page starts to become unresponsive.

Is there something I can do to debug what's going on?

Thanks.

[shilman]

@jayair have you tried turning off all addons & selectively re-enabling? also try turning off all but one story & selectively re-enabling?

[jayair]

@shilman Thanks for the reply.

The addons trick helped. Using this config dropped the initial load time from 22s to 5s.

module.exports = {
  "stories": [
    "../src/stories/**/*.stories.js"
  ],
  "addons": [
//    "@storybook/addon-links",
//    "@storybook/addon-essentials",
    "@storybook/preset-create-react-app"
  ]
}

Debugging a bit further showed that @storybook/addon-essentials is causing the bulk of the slow load times.

I haven't completely tried enabling/disabling single stories. I have a few .stories.js files and one large one with 99 storiesOf calls.

Would it help in performance if I split that up into 99 separate CSF files? Or does that not matter?

[shilman]

@jayair it's probably @storybook/addon-docs which is included by @storybook/addon-essentials. Do you have a repro I can look at?

[angelod1as]

@shilman I'm in 6.0.16 having a huge slowdown as well. You, in another issue (I can't seem to find it) suggested to turn off reactDocgen entirey and it worked, everything started building in a blink of an eye... but now I don't have controls anymore.

If I let reactDoggen turned on, it normally hangs at 70% sealing React Docgen Typescript Plugin.

What you suggested:

"typescript": {
    "reactDocgen": "none"
}

So, or I'll work with the slowdown + controls or fast without controls?

(If you want to, I can open a new issue because of the version difference)

[shilman]

There's another setting:reactDocgen: "react-docgen". This should give you the best of both worlds (speed + controls). But it has some limitations if you're using Typescript, which is why it's not the default yet.

You can also add controls by hand: https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#my-controls-arent-being-auto-generated-what-should-i-do

[angelod1as]

@shilman I'm sticking to "fast without controls" for now, doing them by hand as instructed. It's working, but it's not, like, 10/10. Thanks for the help anyway :)

[christopher-francisco]

Confirmed, this works:

"typescript": {
    "reactDocgen": "none"
}

[Obiwarn]

@shilman FYI: Storybook 6 got so slow we tend to use it less frequently.

Storybook 6.1.0-alpha.17 started │
│ 2.03 min for manager and 3.85 min for preview

^^^ This is with:

"typescript": {
    "reactDocgen": "none"
}

Ok. Huge project + debugging mode, but still.

[torkelrogstad]

Where am I supposed to put the reactDocgen: "none" snippet?

[Obiwarn]

@torkelrogstad

/.storybook/main.js

[shilman]

@Obiwarn we're actively working on perf now. we've got a round of improvements in 6.1 and will continue throughout the 6.x cycle. this is our top priority now.