[docs-infra] Decrease loaded bundle size on docs#48584
Merged
Merged
Conversation
brijeshb42
added
the
scope: docs-infra
Deploy previewhttps://deploy-preview-48584--material-ui.netlify.app/ Bundle size
Check out the code infra dashboard for more information about this PR. |
Janpot
reviewed
May 28, 2026
| }, | ||
| "pnpm": { | ||
| "overrides": { | ||
| "stylis": "4.2.0", |
Member
There was a problem hiding this comment.
We should never do overrides for packages that are published
Suggested change
| "stylis": "4.2.0", | |
| "docs>stylis": "4.2.0", |
Member
|
Maybe make the overrides in |
1. Pin stylis and react-is to single version, otherwise 2 different versions of both were part of the bundle. 2. Update AppSearch to use React Portal instead of `ReactDOMServer.rendertoStaticMarkup` since portal is already part of the bundle. Total savings measured at −57.7 KB wire / −409 KB decoded.
brijeshb42
commented
May 28, 2026
| <div className="DocSearch-NewStartScreenTitle">{category.name}</div> | ||
| {items.map(({ name, icon, href }) => ( | ||
| <NextLink key={name} href={href} className="DocSearch-NewStartScreenItem"> | ||
| <a key={name} href={href} className="DocSearch-NewStartScreenItem"> |
Contributor
Author
There was a problem hiding this comment.
Otherwise Next.js tries to prefetch the pages which is new behavior.
Contributor
Author
There was a problem hiding this comment.
Not a problem. Earlier plain html got rendered even with NextLink, so the links were not detected by next.js. But with portal, these are proper Next.js Link.
It was hard to measure the bundle diff with these prefetch in places. I'll revert at the end so prefetching works.
Move StyleSheetManager (styled-components) and rtlPlugin (@mui/stylis-plugin-rtl) into a shared intermediate module `utils/rtlBundle.ts`, then dynamic-import it from both StyledEngineProvider and DemoSandbox only when direction === 'rtl'. Verified via the next.js build-manifest (497 pages total): 1. Only 2 / 497 pages statically pull the styled-components lib chunk (35990): /performance/table-styled-components and /system/getting-started/custom-components — i.e., the two pages that import `styled-components` directly. No leak into other pages' bundles. 2. 0 / 497 pages statically pull the rtl bundle chunk (26461). It is fetched only on RTL activation, via dynamic import. 3. Pages whose markdown mentions `styled-components` in code examples (interoperability, v5-style-changes, right-to-left) contain the text but do not import the library — they are NOT in the manifest's deps for 35990. Per-page bundle diff vs deploy-preview-48584 (raw decoded / gzip): | chunk | local raw | deploy raw | Δ raw | Δ gzip | |----------------|-----------|------------|------------|------------| | _app.js | 652.6 KB | 680.0 KB | -27.4 KB | -10.6 KB | | 22072.js (Demo)| 48.3 KB | 49.6 KB | -1.25 KB | ~0 | | net per page | | | -28.5 KB | -10.6 KB | Savings come from removing styled-components' StyleSheetManager and the rtl stylis plugin from the always-loaded _app + Demo chunks. RTL toggle cost on a non-sc page: 26461 (~5 KB raw / ~2 KB gzip) + 35990 (~33 KB raw / ~12 KB gzip), fetched once per session. The only page with a small regression is /performance/table-styled-components (+2 KB gzip) because the styled-components lib now lives in a separate chunk (35990) instead of being inlined into the page chunk.
Janpot
approved these changes
May 28, 2026
Member
Janpot
left a comment
Janpot
left a comment
There was a problem hiding this comment.
Cool, do we need the same on X?
Contributor
Author
|
Yes. But that'll propagate automatically in next version bump of |
Member
But the override won't propagate, right? |
Contributor
Author
|
Yes. That'll need manual change. I'll use this PR as a reference anyways. |
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
2 participants
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.
ReactDOMServer.rendertoStaticMarkup. This removesreact-dom/serverfrom the client bundle.styled-componentsand@mui/stylis-plugin-rtlconditionally, when user enables the rtl option from sidebar. This reduces the initial load size by 12kB gzip (33 kB raw).Total savings measured at ~ 69 KB over the wire and ~ 200kB decoded.
Some page wise data
/(home)/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/