storybook: Docs slowing down reloading

@latviancoder what happens when you configure the following setting in .storybook/main.js:

module.exports = {
  typescript: { reactDocgen: 'react-docgen' }
}

I have the same problem (the build hangs for about 5 seconds at this stage: "70% sealing plugins DocGenPlugin")

With the typescript: {reactDocgen: 'react-docgen'} option enabled, rebuilding is very fast, but almost all types are missing from the document.

The main reason that react-docgen vs react-docgen-typescript is slower is how each library get the type information.

• react-docgen: uses babel + plugin-typescript to parse the each file 1 by 1. Since babel is per file it’s inherently faster. A side effect of this is that since it’s not parsing every file to gain the full type information more complex types aren’t handled correctly, or at least some information will be missing
• react-docgen-typescript: uses the typescript parser to parse each one of you files. This library will load all of the files from your tsconfig into 1 project/program and use that to get as much of the type definition that it can. While this provides potentially more accurate type information is is inherently slow. It’s not just one file it’s looking at it’s the entire compilation. This could be anywhere from a few files to thousands of files leading to the longer build and reload times

I’ve done some optimizations to make react-docgen-typescript quicker:

1. Made it a plugin that runs once at the end of a build
2. reuse the typescript “program” to generate docs for each file

These optimization resulted in react-docgen-typescript being much quicker in storybook project. To further optimize the only thing I can think of is a cache stored in tmp that stores docgen information between storybook startups. So if no files changes storybook should start quicker than the last time. I’ll look into shuffling some code around in the plugin to see if we can gain any speed there.

If anyone has other ideas on how to optimize the behavior of react-docgen-typescript-plugin I like to merge pull requests ;P

@latviancoder what happens when you configure the following setting in .storybook/main.js:

module.exports = {
  typescript: { reactDocgen: 'react-docgen' }
}

This helped me too, thanks!

Only the project sources are included.

module.exports = {
  stories: [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  (...)
};

I see no difference in performance when switching reactDocgen on/off.

Hello!

I had a similar issue. Rebuilding was taking more than 20 seconds and most of the time seemed to be spent on the docgen plugin.

I tried to migrate to 6.1 but it didn’t change anything.

However, I tried your following advice:

@shilman:

@latviancoder what happens when you configure the following setting in .storybook/main.js:

module.exports = {
  typescript: { reactDocgen: 'react-docgen' }
}

And it worked like a charm 👏 🎉 Thank you! Now our rebuild time is around 1 second.