Slow debug build with Storybook
Hey there JetBrains!
Debug build is super slow when I use Storybook in a React project (using create-react-app). Do you guys have any idea how I could speed that up?
See below from my Github issue:
This happens to me with a blank project.
I create a new project with CRA and run sb init:
npx create-react-app my-app
cd my-app
npx sb init
On npm run storyboard it builds many node_modules.
Regular build is 19s and debug build in Webstorm over 3 min!
│ Storybook 6.0.28 started │ │ 19 s for manager and 18 s for preview │
Debug:
│ Storybook 6.0.28 started │ │ 3.63 min for manager and 3.67 min for preview │
Please sign in to leave a comment.
Please could you clarify what is debug build, and why do you think that it's Webstorm that has to be blamed for this?
Sorry if I was unclear.
Debug: When I press that bug icon, i.e. run the current npm script to debug it, i.e. to set breakpoints and iterate through the code.
In general when I run a build in debug mode it takes just a little bit longer to compile than when I just run it (i.e. press the play icon). But with the Storybook npm script, debug build takes ages (regular build is OK). I am not sure if Webstorm is to blame for this.
You can easily reproduce it with the three commands above.
When you run it in debugger, each child process is started with debug arguments, and its execution is suspended at the entry point until the debugger registers breakpoints for code locations. In case of multiple subprocesses this can make the execution slower
Just a question: why do you need running this npm script in debugger? What are you trying to debug - storybook itself or your components? In the latter case, you should be using the JavaScript Debug run configuration with your app URL (http://localhost:6006/)
Oh my! Now I feel stupid.
I thought that I need to run both (the npm script and the Javascript Debugger) in debug mode to make breakpoints work.
Thank you so much!