[docs-infra] Lazy-load react-runner + sucrase for demo live-edit#48586
Open
brijeshb42 wants to merge 2 commits into
Open
[docs-infra] Lazy-load react-runner + sucrase for demo live-edit#48586brijeshb42 wants to merge 2 commits into
brijeshb42 wants to merge 2 commits into
Conversation
brijeshb42
added
the
scope: docs-infra
brijeshb42
force-pushed
the
lazy-react-runner
branch
2 times, most recently
from
62de9f4 to
9b4a388
Compare
Deploy previewhttps://deploy-preview-48586--material-ui.netlify.app/ Bundle size
Check out the code infra dashboard for more information about this PR. |
Contributor
There was a problem hiding this comment.
Pull request overview
Defers loading of react-runner (and its sucrase dependency) and DemoEditor (with react-simple-code-editor) by switching them from static imports to React.lazy() with cached dynamic-import promises. The chunks are prefetched on demo hover/focus so they’re ready by the time the user actually engages with live edit, while the existing SSR/bundled component continues to render via Suspense fallbacks. Per the PR data this trims ~50 KB gzip / ~200 KB decoded from docs pages.
Changes:
- Replace static
DemoEditor/ReactRunnerimports withReact.lazybacked by cachedpreloadDemoEditor()/preloadReactRunner()helpers. - Wrap
ReactRunnerin<Suspense fallback={BundledComponent}>andDemoEditorin<Suspense fallback={null}>; addBundledComponentto the live-component memo deps. - Prefetch both chunks from
Root'sonMouseEnter/onFocusso the runtime is warmed before live-edit activation.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
brijeshb42
force-pushed
the
lazy-react-runner
branch
2 times, most recently
from
6f0206a to
70bbbbe
Compare
Convert ReactRunner and DemoEditor from static imports to React.lazy() in Demo.tsx. The live-edit code path (react-runner pulling all of sucrase, plus react-simple-code-editor) only runs after the user focuses the demo editor — `liveDemoActive` defaults to false on every demo. Wrap the lazy components in React.Suspense: - ReactRunner suspense fallback = the pre-rendered BundledComponent so the demo stays visible while the live runtime loads on first edit. - DemoEditor suspense fallback = null (mounts inside an opened Collapse). Prefetch both chunks on hover (and on keyboard focus into the demo card) so the runtime is already cached by the time the user actually clicks edit: `preloadDemoEditor()` and `preloadReactRunner()` hold cached promises that are also passed to React.lazy(), so a single dynamic import is shared between the prefetch path and the render path. Verified via the next.js build-manifest (497 pages total): - 0 / 497 pages statically pull the sucrase chunk (12669) - 0 / 497 pages statically pull the DemoEditor lazy chunk (26770) (next.js still auto-prefetches DemoEditor on idle; sucrase only loads on hover or first edit) Per-page bundle diff vs deploy-preview-48584 (which already has the rtl lazy fix), measured on /material-ui/react-button/: | chunk | local raw | deploy raw | Δ raw | |-----------------|------------|------------|------------| | 47094 sucrase | not loaded | 208.3 KB | -208.3 KB | | 22072 Demo | not loaded | 49.7 KB | -49.7 KB | | 77240, 14134 | not loaded | 40.1 KB | -40.1 KB | | 50613 Demo' | 45.7 KB | not loaded | +45.7 KB | | 26770 DemoEditor| 11.3 KB | not loaded | +11.3 KB | | 7317, 63073 | 31.7 KB | not loaded | +31.7 KB | | net per page | | | -214.8 KB | Net per page: -214.8 KB raw / -49.1 KB gzip. Existing live-edit functionality preserved: hovering the demo warms the chunks; clicking "expand" opens the source viewer; focusing the textarea swaps the bundled component for ReactRunner with the edited code.
brijeshb42
force-pushed
the
lazy-react-runner
branch
from
70bbbbe to
70e16fd
Compare
This file contains hidden or 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
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.
Convert ReactRunner and DemoEditor from static imports to React.lazy() in Demo.tsx. The live-edit code path (react-runner pulling all of sucrase, plus react-simple-code-editor) only runs after the user focuses/hovers the demo editor —
liveDemoActivedefaults to false on every demo.Prefetch both chunks on hover (and on keyboard focus into the demo card) so the runtime is already cached by the time the user actually clicks edit:
preloadDemoEditor()andpreloadReactRunner()hold cached promises that are also passed to React.lazy(), so a single dynamic import is shared between the prefetch path and the render path.We could also prefetch these chunks on idle (if desired).
Some page-wise data
//material-ui/getting-started/installation//material-ui/react-button//material-ui/react-text-field//material-ui/react-autocomplete//material-ui/react-table//material-ui/react-dialog//system/getting-started/custom-components/CSS unchanged: 10.0 KB gzip / 80.7 KB decoded on both.
CSS unchanged.
Extra chunk size loaded on hover/edit -
50.6 kB transferred 210 kB resourcesExisting live-edit functionality preserved: hovering the demo warms the chunks; clicking "expand" opens the source viewer; focusing the textarea swaps the bundled component for ReactRunner with the edited code.
On hold till #47821 lands