Storybook: Progressively Slowed Builds with react-docgen-typescript

Created on 5 Apr 2019  路  7Comments  路  Source: storybookjs/storybook

Describe the bug

The documentation for Typescript offers TSDocgen as an option for parsing and providing props tables for stories. In my recent experience, and as noted in an recent issue in react-docgen-typescript, each tsx story is individually parsed and visibly pauses the Storybook build. With each TS story that is added, the build gets slower and slower. With only 10 stories, our build time is ~1.5 minutes... HMR is also impaired.

To Reproduce

Steps to reproduce the behavior:

  1. Enable react-docgen-typescript-loader for .tsx? files, as recommended.
  2. Enable the TSDocgenPlugin, as recommended.
  3. Have a repo with 10+ stories.
  4. See slow build time.

Screen Shot 2019-04-04 at 8 25 44 PM

Commenting out both 1 and 2 in our setup results in ~4s builds:

Screen Shot 2019-04-04 at 8 33 41 PM

Screenshots

Apr-04-2019 20-24-22
Code snippets

You can view our current Storybook config here on Github. I'm currently working on a PR to reduce our payload sizes with a DLL, so this config will change in the coming days/

System:

  • OS: MacOS
  • Device: Macbook Pro 13", latest
  • Browser: Chrome
  • Framework: React
  • Version: 5.0.5

Additional context
I've been discussing this in the Discord channel, under support. It was suggested I log this bug.

compatibility with other tools inactive performance issue question / support typescript

Most helpful comment

The documentation needs to be updated to reflect that react-docgen-typescript-webpack-plugin should be replaced with react-docgen-typescript-loader. The Webpack plugin was the initial implementation which was later replaced with a loader.

https://github.com/strothj/react-docgen-typescript-loader/pull/40 was just merged in and published as v3.1.0 which should improve the performance. We were creating a TypeScript program instance for each parsed file. The pull request changes this to reuse the same instance.

Can you report what performance you're getting with only the loader installed and with the new version?

All 7 comments

The documentation needs to be updated to reflect that react-docgen-typescript-webpack-plugin should be replaced with react-docgen-typescript-loader. The Webpack plugin was the initial implementation which was later replaced with a loader.

https://github.com/strothj/react-docgen-typescript-loader/pull/40 was just merged in and published as v3.1.0 which should improve the performance. We were creating a TypeScript program instance for each parsed file. The pull request changes this to reuse the same instance.

Can you report what performance you're getting with only the loader installed and with the new version?

@strothj Absolutely. I'll test it and get back to you...!

@strothj BRAVO! Those two changes-- removing the plugin and updating the package-- dropped build time to ~9s.

Screen Shot 2019-04-05 at 8 40 56 AM

@shilman I would recommend updating the documentation for 5.0.5+, depending of course on your own tests.

@clintandrewhall Would you mind submitting a small PR for that?

Credit where it's due. @denieler submitted the pull request which fixed that. :)

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!

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Jonovono picture Jonovono  路  3Comments

tlrobinson picture tlrobinson  路  3Comments

dnlsandiego picture dnlsandiego  路  3Comments

zvictor picture zvictor  路  3Comments

sakulstra picture sakulstra  路  3Comments