[system] Refactor defaultSxConfig for better gzip compression#47875
[system] Refactor defaultSxConfig for better gzip compression#47875sai6855 wants to merge 13 commits intomui:masterfrom
Conversation
Netlify deploy previewhttps://deploy-preview-47875--material-ui.netlify.app/ Bundle size report
|
sai6855
added
performance
scope: system
sai6855
force-pushed
the
f-default-sx-config
branch
3 times, most recently
from
f1244af to
8c5b2f6
Compare
sai6855
force-pushed
the
f-default-sx-config
branch
from
75f509c to
849282b
Compare
There was a problem hiding this comment.
Pull request overview
Refactors packages/mui-system’s defaultSxConfig to reduce repetitive object literals by generating many entries programmatically, aiming to improve gzip compression of the shipped code.
Changes:
- Generates border-related config entries via
Object.fromEntries([...].map(...)). - Generates spacing (padding/margin) config entries programmatically.
- Consolidates many “empty config” props (display/flexbox/grid/positions/typography) and sizing transform props into generated blocks.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| ...Object.fromEntries( | ||
| ['border', 'borderTop', 'borderRight', 'borderBottom', 'borderLeft', 'outline'].map((prop) => [ | ||
| prop, | ||
| { | ||
| themeKey: 'borders', | ||
| transform: borderTransform, | ||
| }, | ||
| ]), | ||
| ), |
There was a problem hiding this comment.
This refactor introduces runtime work at module evaluation time (allocating arrays, running .map(), and calling Object.fromEntries()). In the PR description it’s stated that defaultSxConfig only runs when createTheme is executed, but defaultSxConfig is constructed when this module is imported. Consider updating the PR description (and/or adding a brief comment) to reflect when this code runs and why the added initialization work is acceptable.
| gridTemplateAreas: {}, | ||
| gridArea: {}, | ||
|
|
||
| // positions |
There was a problem hiding this comment.
After moving gridColumn/gridRow/etc and position/top/right/bottom/left into the big Object.fromEntries(...) block above, the later // grid and // positions sections now only contain gap/rowGap/columnGap and zIndex respectively. Consider regrouping these entries (e.g., separate fromEntries blocks per section or moving zIndex into the same positions block) so the section headers still match the properties they contain and the config stays easy to scan.
| // positions | |
| // zIndex |
|
I don't have any strong opinons on this. I'll let others give a decision on this to decide if it's worth the bundle size compression. |
mj12albert
left a comment
mj12albert
left a comment
There was a problem hiding this comment.
Don't think this works, I made Claude Code compress and measure this PR vs main:
| Metric | Original | PR | Delta |
|---|---|---|---|
| Raw source | 4,742 B | 3,962 B | -780 B |
| Gzip (level 9) | 976 B | 1,056 B | +80 B |
| Rough-minified + Gzip | 871 B | 905 B | +34 B |
| Brotli (quality 11) | 818 B | 894 B | +76 B |
The gzip size actually INCREASED from 975 to 1058 bytes. That's +83 bytes gzipped. The raw size decreased from 4742 to 3962 (-780 bytes), but gzip is worse.
The original file has highly repetitive structure (
{ style: padding }repeated 21 times,{}repeated many times, etc.) which is exactly the kind of redundancy gzip/brotli exploit. TheObject.fromEntries/.map()pattern introduces unique syntax tokens (Object.fromEntries,.map,...operators) that compress poorly relative to the repetitive literals they replace.
|
Prove me wrong but I don't think |
You are right, Object.fromEntries is worse off interms of perf. Closing this PR |
This PR refactors the
defaultSxConfigobject to use programmatic generation (viaObject.fromEntriesand array mapping) for many style property configurations, replacing repetitive manual property definitions.Since
defaultSxConfigruns only whencreateThemeis executed, and an app typically doesn’t have manycreateThemecalls, I think this PR change won’t affect performance much.I have gotten good results by converting static object definitions to programmatic generation, in
data-grida PR reduced package size by 630 Bytesmui/mui-x#21211