storybook: [Bug]: Slow initial page loading since upgrade to v7, taking more than one minute to download chunks
Describe the bug
I’m using Storybook 7.0.6 for react-vite, and since migrating from 6.5 to 7.0.6, I’m experiencing a very slow page loading time.
When I look at the network panel in Chrome, I see that the server is waiting for a long time (usually around 1 minute) before finally sending chunks that weight only a few kb.
Not sure if it’s related, but I’ve also this warnings in the console:
To Reproduce
No response
System
Environment Info:
System:
OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
CPU: (12) x64 Intel(R) Core(TM) i7-9850H CPU @ 2.60GHz
Binaries:
Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node
Yarn: 3.2.3 - /usr/bin/yarn
npm: 9.3.1 - ~/.nvm/versions/node/v18.14.1/bin/npm
Browsers:
Chrome: 112.0.5615.121
Firefox: 102.10.0esr
Additional context
I’ve just upgraded my project from 6.5 to 7. It’s a yarn mono repo with only two packages (design system implementation in react/vite and storybook).
And here’s the main.ts file:
import type { StorybookConfig } from '@storybook/react-vite';
const config: StorybookConfig = {
stories: [
'../src/stories/**/*.stories.mdx',
'../src/stories/**/*.stories.tsx',
],
staticDirs: ['../public'],
addons: [
'@storybook/addon-essentials',
'@storybook/addon-a11y',
],
core: {
builder: '@storybook/builder-vite',
disableTelemetry: true,
},
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: {
autodocs: true,
},
};
export default config;
And my dependencies:
"dependencies": {
"@emotion/react": "11.10.6",
"@emotion/styled": "11.10.6",
"@company/design-system-react": "0.0.3-rc1",
"@mui/material": "5.11.12",
"react": "18.2.0",
"react-dom": "18.2.0"
},
"devDependencies": {
"@babel/core": "7.21.0",
"@mdx-js/react": "2.3.0",
"@storybook/addon-a11y": "7.0.6",
"@storybook/addon-actions": "7.0.6",
"@storybook/addon-docs": "7.0.6",
"@storybook/addon-essentials": "7.0.6",
"@storybook/addon-interactions": "7.0.6",
"@storybook/addon-viewport": "7.0.6",
"@storybook/addons": "7.0.6",
"@storybook/builder-vite": "^7.0.6",
"@storybook/manager-api": "7.0.6",
"@storybook/preview-api": "7.0.6",
"@storybook/react": "7.0.6",
"@storybook/react-vite": "7.0.6",
"@storybook/testing-library": "0.1.0",
"@storybook/theming": "7.0.6",
"@types/react": "18.0.28",
"@types/react-dom": "18.0.11",
"@vitejs/plugin-react": "3.1.0",
"babel-loader": "8.3.0",
"eslint-plugin-storybook": "0.6.11",
"storybook": "7.0.6",
"typescript": "4.9.5",
"vite": "4.1.3"
}
About this issue
- Original URL
- State: closed
- Created a year ago
- Reactions: 13
- Comments: 35 (9 by maintainers)
Commits related to this issue
- docs: try disabling reactDocgen https://github.com/storybookjs/storybook/issues/22164#issuecomment-1603632731 — committed to swisspost/design-system by gfellerph 8 months ago
Has there been any progress on this? I have the same problem on 7.0.9
Same issue with version 7. Vite builds in 12 seconds. But the initial load for the stories is around 30-40 seconds @shilman
this is a major issue, starting to question usage of storybook
Hi there! Thank you for opening this issue, but it has been marked as
stalebecause we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We’d love to resolve this issue, but we can’t do it without your help!can we get some eyeballs here?
I’m afraid we need to close this issue for now, since we can’t take any action without the requested reproduction or additional information. But please don’t hesitate to open a new issue if the problem persists – we’re always happy to help. Thanks so much for your understanding.
@kaiyoma AFAIK there are a few contributors the startup time:
main.js:On the last point, I also tried disabling docgen in @fabien-thebaud-ariadnext 's project and saw the preview build time on my local machine drop from 2s to .6s. We’ve been aware of this bottleneck for awhile and have some short term workarounds planned. Long term, we plan to revamp the way we handle docgen in Storybook.
NOTE: I’ve updated the perf summary in the previous comment with the docgen trick, which was also gave a big improvement
@valentinpalkovic It’s related to Vite. We switched from html-vite to html-webpack5 as a framework, and the issue stopped showing up.
As Vite wasn’t a requirement for us and we don’t have expertise on it, we’re going to stick with Webpack for now.
I thought I had this issue, but what actually happened was tailwind was processing all node_modules. Quick and snappy once I took out
'./**/*/*.{js,jsx,ts,tsx}'from the tailwindconfigOkay cool, this is very helpful! I’m in the middle of upgrading our project to ESM and Vite and Node 18, so I might put Storybook on the back burner until that’s done. But all this info is very relevant, and I’ll definitely try a 7.1 version soon to see if it helps.
Hi,
I just had this issue with the latest version (7.6.0).
When installing in an empty project, in HTML, we don,t have the issue. But when trying to add Storybook on top of our Drupal project, we start seeing this issue.
I just wanted to add the info out there about it. We still have no idea how to fix it, but it’s clearly linked to our project structure.
Hi people; Not sure if my input would help, but when running from macos, I don’t have this issue at all, everything loads super-fast (I use builder-vite). But when I load it from a docker container (node:bookworm and standard playwright image), initial load goes up to around 40 secs. During initial load it also doesn’t seem to apply my custom plugin to add cache-control header (I’m using it for tests) – all files are loaded with “no-cache”, default value; after it loads once, if I refresh the page, everything works fine and cache headers are in place.
@shilman As recommended, I added
typescript: { reactDocgen: false },to my configuration and it did the trick, page loading time is now down from ~90 seconds to ~1 second. Thank you for your help!@kaiyoma do you have any reproduction we can look at? i can’t imagine what is taking so long. our build benchmarks and tests on a variety of public projects are fast, especially for vite projects. we’ve seen some minor slowdowns moving from webpack4 to webpack5, but overall things have gotten faster in storybook7. i’d love to get to the bottom of it.
also i’m sorry to hear you’ve been having trouble with migrations. again, we’ve tested on a wide variety of projects in the leadup to release and most of the user feedback has been how smooth the upgrade has been. if you file an issue describing the problem i’d be happy to take a look.
Hi @shilman I tested the “opt-out of on-demand story loading” config, it didn’t improve loading time in my case. I wasn’t able to create a repo with the same exact issue, this is the closest I could get: https://stackblitz.com/edit/github-qkhmgm The initial page loading after running
yarn storybookis not as slow as what I have on my machine (~30 seconds compared to 1 to 2 minutes) but it’s still pretty slow.