♻️ Refactor to gather story snapshot dom without reloading the page #592
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
wwilsman
force-pushed
the
ww/quick-dom-capture
branch
from
26fc55a to
eb800fd
Compare
When relying on the snapshot method to capture the DOM, each story is loaded from scratch. For some larger Storybooks, this can create a lot of extra time repeatedly initializing all of Storybook's JavaScript for each story. By refactoring to gather DOM from a single page, this initial load time only happens once, and asset discovery can be performed on the static DOM snapshot without needing JavaScript enabled. In practice, this seems to speed up most Storybooks by roughly 20-40% depending on how well optimized the stories are. For poorly optimized stories, we also automatically handle page crashes and will only error if a page crashes on the same story more than once. When testing large Storybooks of 800+ stories, it takes about 2 minutes (on my machine). However if that is too slow for some (or if stories are slow to load), a few additional flags were added to split snapshots into shards to allow parallel processes for the same Percy build. The new flags `--shard-count` or `--shard-size` will determine how to split snapshots, and `--shard-index` will determine which shard to use for the current process. Also the `--partial` flag from the exec command was incorporated, which can mark a build as partial to hide missing snapshots in the UI.
wwilsman
force-pushed
the
ww/quick-dom-capture
branch
from
eb800fd to
ebd5970
Compare
Robdel12
reviewed
Jun 27, 2022
| "cross-spawn": "^7.0.3", | ||
| "qs": "^6.11.0" | ||
| "@percy/cli-command": "^1.4.0", | ||
| "@storybook/router": "^6.5.0", |
There was a problem hiding this comment.
I was hopeful to kill this dep, but it came back when we had to rebuild the URL right? 😭
There was a problem hiding this comment.
Unfortunately, yes. While we can set story args and globals before capturing the DOM, it seems Storybook does not actually update the URL from internal state changes (besides when the story ID changes).
| ...percy.config.storybook, | ||
| baseUrl: url | ||
| }, () => { | ||
| log.debug(`Page crashed while loading story: ${stories[0].id}`); |
There was a problem hiding this comment.
This will be helpful for debugging poison stories 💯
|
|
||
| return waitFor(async () => { | ||
| // use newer storybook APIs before old APIs | ||
| await (window.__STORYBOOK_PREVIEW__?.extract?.() || |
There was a problem hiding this comment.
Does this work with on demand now?
There was a problem hiding this comment.
The trick seems to be you need to call extract before calling raw now. Looking at Storybook's own code for extracting stories.json, they do something similar (but with puppeteer).
Closed
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What is this?
When relying on the snapshot method to capture the DOM, each story is loaded from scratch. For some larger Storybooks, this can create a lot of extra time repeatedly initializing all of Storybook's JavaScript for each story.
By refactoring to gather DOM from a single page, this initial load time only happens once, and asset discovery can be performed on the static DOM snapshot without needing JavaScript enabled. In practice, this seems to speed up most Storybooks by roughly 20-40% depending on how well optimized the stories are. For poorly optimized stories, we also automatically handle page crashes and will only error if a page crashes on the same story more than once.
When testing large Storybooks of 800+ stories, it takes about 2 minutes (on my machine). However if that is too slow for some (or if stories are slow to load), a few additional flags were added to split snapshots into shards to allow parallel processes for the same Percy build. The new flags
--shard-countor--shard-sizewill determine how to split snapshots, and--shard-indexwill determine which shard to use for the current process. Also the--partialflag from the exec command was incorporated, which can mark a build as partial to hide missing snapshots in the UI.Also, I didn't realize this wasn't a feature already, but globals can now be provided the same as story args.
TODO
✨ Export core server util cli#976
The remaining todos feel out of scope for this PR since it relates to an existing issue our repo has had since the first CLI refactor. We'll address those in a follow up PR so we can push this major feature over the line.