-
Notifications
You must be signed in to change notification settings - Fork 363
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
refactor: [M3-8184] - Improve local Storybook performance #10762
refactor: [M3-8184] - Improve local Storybook performance #10762
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was only about maybe a second difference for me and both were super quick, around 5 seconds, but I also have an M3 chip/macbook from 2023 😅
Saw these stats in the terminal though, which maybe corroborates?
- Develop: 320 ms for manager and 4.02 s for preview (ranged about 3.5-5s for the preview)
- this branch: 317 ms for manager and 2.8 s for preview (ranged about 2.5-3.5s for the preview)
Gonna approve, tho might be worth getting other people with older processors to see if they have a bigger difference? 😅
The package is also styleguidist/react-docgen-typescript#494 (the last release was in end of 2021).
Hm...should we potentially use a different package down the line/keep this in the back of our minds?
This means future features added to Storybook will also need to be added to the include array.
Could we document this somewhere for future features so it doesn't get lost? Repository structure and Component library both mention storybook. Maybe Component library would work better, although that's more about components than features - not too sure where the best place to mention this would be
// Speeds up Storybook build time | ||
compilerOptions: { | ||
allowSyntheticDefaultImports: false, | ||
esModuleInterop: false, | ||
}, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Found this upon further investigation storybookjs/storybook#24943 (comment)
Coverage Report: ✅ |
I didn’t notice a significant difference, so I believe we can dig deeper by profiling the initial load to identify what’s blocking the main thread. There seem to be two instances of long-running tasks, which could be related to how we're merging MUI themes (possibly). I would also see what's required to bump to 8.2 where they consolidated dependencies for better performance. |
@jaalah-akamai The main performance issue is using I dug a bit deeper to see if we can automatically tell I did not notice a significant difference by upgrading to 8.2, and upgrading came with a bunch of false positive logging that is a known issue so will hold off on the update until the Storybook team addresses that |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks like my approval from last time is still there 😆
Also similar to last time, both loading times were pretty quick and there wasn't too big a difference for me. I'm definitely curious about the comment you left on packages/manager/.storybook/main.ts. Hopefully we can find a solution - will try to look into it a bit too!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I'm seeing similar performance on develop
when I run yarn storybook
when the cache is warm.
develop | this PR |
---|---|
develop-storybook-perf.mov |
this-pr-storybook-pref.mov |
~22 seconds | ~22 seconds |
This is just preference, but I don't like adding extra configuration unless it brings significant value because it gives me flashbacks to our webpack configs 😅
Happy to approve if I'm able to observe significant performance improvement, but I haven't been able to replicate when the cache is warm (meaning yarn storybook
has been run at least once before).
I didn't do extensive testing when the cache is cold / does not exist, but again, I'm not sure extra configuration is worth better performance when it only applies to cold starts
I don't want my preference/opinions to block this, I just want to make sure the change actually delivers value for the team.
@bnussman-akamai Removed the vite config update since that didn't bring much value. Personally, I notice a ~10s improvement on my machine for cold starts. I don't run Storybook that often so when I do it's usually a cold start but curious to hear how others use Storybook |
Description 📝
Performance optimizations for running Storybook locally
The main culprit is using
react-docgen-typescript
; it's parsing every file for docgen info. The package is also no longer being maintained (the last release was in end of 2021).react-docgen
, however we're missing a lot of typing by using that since it's using a shallower analysis.react-docgen-typescript
, but tighten the scope on what files are parsed for the docgen (Components and Features only). And to also disableallowSyntheticDefaultImports
andesModuleInterop
per the Storybook MUI docsThe time from first paint to Intro loaded on my Intel i7 2019 MBP went from
over 1 minute
to30s
🎉Preview 📷
Screen.Recording.2024-08-08.at.11.49.20.AM.mov
Screen.Recording.2024-08-09.at.1.22.42.PM.mov
How to test 🧪
Reproduction steps
(How to reproduce the issue, if applicable)
Verification steps
(How to verify changes)
As an Author I have considered 🤔
Check all that apply