[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 #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 (facebook/create-react-app#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/addons@4.0.0 @storybook/addon-links@4.0.0 @storybook/addon-knobs@4.0.0 @storybook/addon-info@4.0.0 @storybook/addon-actions@4.0.0 @storybook/react@4.0.9

$ 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: #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]

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?

[hampusborgos]

@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

[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.

[stale]

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!

[Zaynex]

@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)

I want know if there any config that can ignore some npm package when run React Docgen Typescript Plugin.

This wasn't a serious problem at first, until I import babylon.js（3d library).

[shilman]

@Zaynex

• Try upgrading to 6.1. There were some docgen improvements there
• Try setting reactDocgen to 'react-docgen'

You can try playing around with the include paths of 'react-docgen-plugin', but I haven't seen any huge speedups from that.

[Zaynex]

I'm using @storybook/cli:^6.0.21 .
After using reactDocgen to 'react-docgen', webpack hot reload time from 20000ms - 50000ms to 1000ms - 3000ms.
@shilman Thanks, man.

[bregenspan]

In addition to the change of configuring typescript.reactDocgen: 'react-docgen', something that gave a huge performance boost for my company's Storybook was updating the glob patterns included in our stories config to make them more targeted.

We had started with:

.storybook/main.js

stories: ['../**/*.stories.@(js|jsx|ts|tsx|mdx)'],

and we found that updating to a more specific glob pattern shaved off ~75% of what was previously a ~20 second build time:

.storybook/main.js

const path = require('path');
/* ... */
stories: [path.join(__dirname, '..', 'src/**/*.stories.@(js|jsx|ts|tsx|mdx')],

(I still want to dig a little more into exactly why we get so wildly different a result between these two match patterns--we ruled out it just being a matter of the original path including more files to search through--but posting here in case helpful to anyone else seeing slow performance).

[shilman]

@bregenspan the first glob includes node_modules 😭

[sandwichsudo]

.storybook/main.js

const path = require('path');
/* ... */
stories: [path.join(__dirname, '..', 'src/**/*.stories.@(js|jsx|ts|tsx|mdx')],

@bregenspan This was a massive boost for us, thanks so much for sharing

[koba04]

I have a similar issue with storybook v6 on react-transition-group and it is a blocker to update the storybook version.

    __child-HtmlWebpackPlugin_0  6.32 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core-common/dist/cjs/templates/index.ejs] 2 KiB {HtmlWebpackPlugin_0} [built]
ℹ ｢wdm｣: Compiled successfully.  // Takes about 3 minutes to display the following message
╭─────────────────────────────────────────────────────╮
│                                                     │
│   Storybook 6.2.9 started                           │
│   15 s for manager and 14 s for preview             │
│                                                     │
│    Local:            http://localhost:6006/         │
│    On your network:  http://192.168.116.80:6006/    │
│                                                     │
╰─────────────────────────────────────────────────────╯

You can reproduce it on reactjs/react-transition-group#741.

[levymetal]

I'm upgrading an enterprise project from Webpack 4 to Webpack 5. I'm seeing significantly slower rebuilds in Storybook on Webpack 5 (~800ms to 5500ms).

reactDocgen: 'none' shaves this down to 3500ms. Removing all css brings it down to 1500ms.

There are numerous issues at play and I'm not sure if any are related to Storybook.

For the css, I believe the culprit to be css-loader (unless I'm missing some really obvious config). I've created a minimal repro (https://github.com/levymetal/webpack5-css-loader-repro) and posted it on an existing Webpack issue: webpack/webpack#12102 (comment).

I'm still trying to figure out why the rebuild is 2x slower with reactDocgen: 'none' and no css and if this can be isolated to Storybook or Webpack.

[shilman]

@levymetal which version of storybook are you using? i think there's a react-docgen-typescript perf regression in 6.4-alpha, but it should be OK in 6.3.7. would be great if you could verify that in your project. 🙏

this is the first i'm hearing about the css-loader issue though 🤦

[levymetal]

@shilman I'm on 6.3.7, I'm pretty sure the 2000ms saving by using reactDocgen: 'none' is on 6.3.7, but I can't say for sure, will need to test again. I haven't tested that part in a while because reactDocgen: 'none' is fine for us.

I was wrong about css-loader, the issue in my repro was actually caused by mini-css-extract-plugin. Replacing that with style-loader or using experimentalUseImportModule: true fixes the repro I posted above, and may work for others, but sadly doesn't fix the performance issues in the real repo I'm working on. So there's still something else going on. I'm back to the drawing board, but slowly but surely narrowing down the culprits.

[levymetal]

I've finally been able to make a repro of the issue we're experiencing. It seems to have something to do with sass imports. When using @import in css modules, all css is recompiled on every rebuild, but only when running the Storybook server. The webpack dev server is fine.

I've updated the repro here: https://github.com/levymetal/webpack5-css-loader-repro

The readme contains detailed instructions, but here's the TLDR:

• run yarn generate (generates 300 dummy components)
• run yarn start to run the webpack dev server. Take note of the rebuild time (no issues)
• run yarn storybook. Note rebuilds are significantly slower (all css is recompiled)

If you repeat these steps using webpack 4 (switch to the webpack4 branch), there's no difference between the Storybook server and webpack dev server; rebuilds are fast in both.

[valentinpalkovic]

Hey @levymetal,

Do you still encounter the same issue with the newest version of Storybook?

I have updated the package.json of your repro like this:

{
  "name": "webpack5-css-loader-repro",
  "version": "0.0.0",
  "description": "compare build perf between webpack 4/5",
  "main": "index.js",
  "private": true,
  "scripts": {
    "generate": "./script/generate_components",
    "start": "yarn && yarn webpack serve --open",
    "storybook": "yarn && start-storybook -p 9009"
  },
  "author": "",
  "license": "",
  "dependencies": {
    "@babel/core": "^7.20.5",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/register": "^7.18.9",
    "acorn": "^8.4.1",
    "babel-loader": "^9.1.0",
    "core-js": "^3.26.1",
    "css-loader": "^6.7.2",
    "html-entities": "^2.3.3",
    "sass": "^1.56.1",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sass-loader": "^12.2.0",
    "style-loader": "^3.3.1",
    "thread-loader": "^3.0.4",
    "typescript": "^4.3.5",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "devDependencies": {
    "@storybook/builder-webpack5": "^6.5.14",
    "@storybook/manager-webpack5": "^6.5.14",
    "@storybook/react": "^6.5.14",
    "@types/react-dom": "^17.0.9",
    "prettier": "^2.3.2"
  }
}

• I have updated all build and Storybook related dependencies
• I have deleted node-sass and installed sass (Dart Sass) instead, which is the official recommendation.
• Starting Storybook and changing the CSS of one component will almost immediately show me the changes in Storybook

Please reopen this issue, if you think it is still relevant

[levymetal]

Hey @valentinpalkovic, thanks for following up! We ended up solving this a while ago by replacing node-sass with sass. I forgot to post back here 🥲.

I just tested the repro and this change alone fixes the issue without needing to update anything else. I also tried updating all deps including node-sass and this also fixes the issue. So it looks like it can be fixed two ways - either just replace node-sass with sass (recommended), or update all build & storybook deps, or do both 😸.

Either way, issue is 100% resolved for us and our rebuilds are super fast. Appreciate the work!