Skip to content
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

[docs] Extend size-snapshot #17633

Merged
merged 11 commits into from
Oct 3, 2019

Conversation

eps1lon
Copy link
Member

@eps1lon eps1lon commented Sep 30, 2019

New comparison table sorts by absolute diff making it easier to scan for changes

Track all components in core and lab. This should make their size snapshots a bit more stable with regards to chunks (we had some issues previously when a change in one dependency caused fluctuations for every tracked asset).

Running webpack separately on every bundle instead of declaring every bundle as an entry would be the most stable solution but increases time and is less representative of the change one sees when adding a given component to their app.

Labelled as docs since we link to it from some docs sites and I want to automate that process.

Future work:

  • Display size of component in material-ui/com/api/* (probably easier to do with mdx)
  • Explore if we can leverage lambda functions to calculate bundle size of a given demo

@eps1lon eps1lon added the docs Improvements or additions to the documentation label Sep 30, 2019
@mui-pr-bot
Copy link

mui-pr-bot commented Sep 30, 2019

@material-ui/core: parsed: +3.41% , gzip: +3.84%
@material-ui/lab: parsed: +0.53% , gzip: +2.38%
@material-ui/styles: parsed: +0.02% , gzip: +1.67%

Details of bundle changes.

Comparing: 6905c58...860b997

bundle Size Change Size Gzip Change Gzip
Link ▲ +66.9 kB (+Infinity% ) 66.9 kB ▲ +21.1 kB (+Infinity% ) 21.1 kB
TrapFocus ▼ -3.77 kB (-100.00% ) 0 B ▼ -1.6 kB (-100.00% ) 0 B
List ▲ +62.4 kB (+Infinity% ) 62.4 kB ▲ +19.3 kB (+Infinity% ) 19.3 kB
@material-ui/core ▲ +11.4 kB (+3.41% ) 346 kB ▲ +3.51 kB (+3.84% ) 94.9 kB
ListItem ▲ +76.8 kB (+Infinity% ) 76.8 kB ▲ +24 kB (+Infinity% ) 24 kB
Popper ▲ +9 B (+0.03% ) 28.4 kB ▲ +21 B (+0.21% ) 10.2 kB
ListItemAvatar ▲ +62.1 kB (+Infinity% ) 62.1 kB ▲ +19.4 kB (+Infinity% ) 19.4 kB
styles/createMuiTheme ▼ -109 B (-0.67% ) 16.2 kB ▼ -39 B (-0.67% ) 5.78 kB
ListItemIcon ▲ +62.2 kB (+Infinity% ) 62.2 kB ▲ +19.4 kB (+Infinity% ) 19.4 kB
@material-ui/lab ▲ +755 B (+0.53% ) 144 kB ▲ +1.04 kB (+2.38% ) 44.9 kB
ListItemSecondaryAction ▲ +62 kB (+Infinity% ) 62 kB ▲ +19.3 kB (+Infinity% ) 19.3 kB
@material-ui/system ▲ +24 B (+0.15% ) 15.6 kB ▲ +5 B (+0.12% ) 4.35 kB
ListItemText ▲ +65.2 kB (+Infinity% ) 65.2 kB ▲ +20.4 kB (+Infinity% ) 20.4 kB
Avatar ▲ +62.6 kB (+Infinity% ) 62.6 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
ListSubheader ▲ +63 kB (+Infinity% ) 63 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
Badge ▲ +65.6 kB (+Infinity% ) 65.6 kB ▲ +20.2 kB (+Infinity% ) 20.2 kB
Menu ▲ +88.4 kB (+Infinity% ) 88.4 kB ▲ +27.6 kB (+Infinity% ) 27.6 kB
BottomNavigationAction ▲ +75.4 kB (+Infinity% ) 75.4 kB ▲ +23.8 kB (+Infinity% ) 23.8 kB
MenuItem ▲ +77.8 kB (+Infinity% ) 77.8 kB ▲ +24.3 kB (+Infinity% ) 24.3 kB
Breadcrumbs ▲ +68.3 kB (+Infinity% ) 68.3 kB ▲ +21.3 kB (+Infinity% ) 21.3 kB
MenuList ▲ +66 kB (+Infinity% ) 66 kB ▲ +20.6 kB (+Infinity% ) 20.6 kB
ButtonBase ▲ +73.9 kB (+Infinity% ) 73.9 kB ▲ +23.1 kB (+Infinity% ) 23.1 kB
MobileStepper ▲ +68 kB (+Infinity% ) 68 kB ▲ +21.1 kB (+Infinity% ) 21.1 kB
Card ▲ +62.9 kB (+Infinity% ) 62.9 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
Modal ▼ -116 B (-0.80% ) 14.4 kB ▼ -82 B (-1.60% ) 5.03 kB
CardActions ▲ +62 kB (+Infinity% ) 62 kB ▲ +19.3 kB (+Infinity% ) 19.3 kB
NativeSelect ▲ +76.7 kB (+Infinity% ) 76.7 kB ▲ +24.1 kB (+Infinity% ) 24.1 kB
CardHeader ▲ +65.4 kB (+Infinity% ) 65.4 kB ▲ +20.4 kB (+Infinity% ) 20.4 kB
NoSsr ▲ +2.19 kB (+Infinity% ) 2.19 kB ▲ +1.04 kB (+Infinity% ) 1.04 kB
Checkbox ▲ +81.9 kB (+Infinity% ) 81.9 kB ▲ +25.7 kB (+Infinity% ) 25.7 kB
OutlinedInput ▲ +73.8 kB (+Infinity% ) 73.8 kB ▲ +22.9 kB (+Infinity% ) 22.9 kB
CircularProgress ▲ +64.4 kB (+Infinity% ) 64.4 kB ▲ +20.1 kB (+Infinity% ) 20.1 kB
Popover ▲ +82.8 kB (+Infinity% ) 82.8 kB ▲ +25.5 kB (+Infinity% ) 25.5 kB
Collapse ▲ +67.8 kB (+Infinity% ) 67.8 kB ▲ +20.9 kB (+Infinity% ) 20.9 kB
Portal ▲ +4 B (+0.14% ) 2.91 kB ▲ +8 B (+0.61% ) 1.32 kB
CssBaseline ▲ +57.6 kB (+Infinity% ) 57.6 kB ▲ +18 kB (+Infinity% ) 18 kB
Radio ▲ +82.5 kB (+Infinity% ) 82.5 kB ▲ +25.8 kB (+Infinity% ) 25.8 kB
DialogActions ▲ +62.1 kB (+Infinity% ) 62.1 kB ▲ +19.4 kB (+Infinity% ) 19.4 kB
RadioGroup ▲ +63.3 kB (+Infinity% ) 63.3 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
DialogContentText ▲ +64.3 kB (+Infinity% ) 64.3 kB ▲ +20.1 kB (+Infinity% ) 20.1 kB
Rating ▼ -65 B (-0.09% ) 70.2 kB ▲ +370 B (+1.69% ) 22.3 kB
Divider ▲ +62.6 kB (+Infinity% ) 62.6 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
RootRef ▲ +4.7 kB (+Infinity% ) 4.7 kB ▲ +1.78 kB (+Infinity% ) 1.78 kB
ExpansionPanel ▲ +71.1 kB (+Infinity% ) 71.1 kB ▲ +22.1 kB (+Infinity% ) 22.1 kB
Select ▲ +113 kB (+Infinity% ) 113 kB ▲ +33.6 kB (+Infinity% ) 33.6 kB
ExpansionPanelDetails ▲ +61.9 kB (+Infinity% ) 61.9 kB ▲ +19.3 kB (+Infinity% ) 19.3 kB
Skeleton ▲ +62.5 kB (+Infinity% ) 62.5 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
Fab ▲ +77 kB (+Infinity% ) 77 kB ▲ +23.9 kB (+Infinity% ) 23.9 kB
Slide ▲ +25.1 kB (+Infinity% ) 25.1 kB ▲ +8.69 kB (+Infinity% ) 8.69 kB
FilledInput ▲ +73 kB (+Infinity% ) 73 kB ▲ +22.6 kB (+Infinity% ) 22.6 kB
Slider ▼ -83 B (-0.11% ) 75.3 kB ▲ +346 B (+1.49% ) 23.6 kB
FormControlLabel ▲ +65.8 kB (+Infinity% ) 65.8 kB ▲ +20.5 kB (+Infinity% ) 20.5 kB
Snackbar ▲ +77.1 kB (+Infinity% ) 77.1 kB ▲ +24 kB (+Infinity% ) 24 kB
FormHelperText ▲ +63.3 kB (+Infinity% ) 63.3 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
SnackbarContent ▲ +66 kB (+Infinity% ) 66 kB ▲ +20.6 kB (+Infinity% ) 20.6 kB
Grid ▲ +65.1 kB (+Infinity% ) 65.1 kB ▲ +20.3 kB (+Infinity% ) 20.3 kB
SpeedDial ▲ +85.9 kB (+Infinity% ) 85.9 kB ▲ +27 kB (+Infinity% ) 27 kB
GridListTile ▲ +63.9 kB (+Infinity% ) 63.9 kB ▲ +19.9 kB (+Infinity% ) 19.9 kB
SpeedDialAction ▲ +115 kB (+Infinity% ) 115 kB ▲ +36.4 kB (+Infinity% ) 36.4 kB
Grow ▲ +23.7 kB (+Infinity% ) 23.7 kB ▲ +8.18 kB (+Infinity% ) 8.18 kB
SpeedDialIcon ▲ +64.9 kB (+Infinity% ) 64.9 kB ▲ +20.2 kB (+Infinity% ) 20.2 kB
Icon ▲ +63.1 kB (+Infinity% ) 63.1 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
Step ▲ +62.6 kB (+Infinity% ) 62.6 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
Input ▲ +72.1 kB (+Infinity% ) 72.1 kB ▲ +22.5 kB (+Infinity% ) 22.5 kB
StepButton ▲ +82.3 kB (+Infinity% ) 82.3 kB ▲ +25.8 kB (+Infinity% ) 25.8 kB
InputBase ▲ +70.3 kB (+Infinity% ) 70.3 kB ▲ +22 kB (+Infinity% ) 22 kB
StepConnector ▲ +62.7 kB (+Infinity% ) 62.7 kB ▲ +19.6 kB (+Infinity% ) 19.6 kB
LinearProgress ▲ +65.6 kB (+Infinity% ) 65.6 kB ▲ +20.3 kB (+Infinity% ) 20.3 kB
StepContent ▲ +68.9 kB (+Infinity% ) 68.9 kB ▲ +21.4 kB (+Infinity% ) 21.4 kB
TextareaAutosize -- 5.11 kB ▼ -13 B (-0.60% ) 2.14 kB
StepIcon ▲ +64.9 kB (+Infinity% ) 64.9 kB ▲ +20.1 kB (+Infinity% ) 20.1 kB
@material-ui/styles ▲ +10 B (+0.02% ) 51.8 kB ▲ +257 B (+1.67% ) 15.6 kB
StepLabel ▲ +68.9 kB (+Infinity% ) 68.9 kB ▲ +21.5 kB (+Infinity% ) 21.5 kB
Backdrop ▲ +67.8 kB (+Infinity% ) 67.8 kB ▲ +20.9 kB (+Infinity% ) 20.9 kB
Stepper ▲ +64.9 kB (+Infinity% ) 64.9 kB ▲ +20.3 kB (+Infinity% ) 20.3 kB
Box ▲ +70.7 kB (+Infinity% ) 70.7 kB ▲ +21.3 kB (+Infinity% ) 21.3 kB
SvgIcon ▲ +63.3 kB (+Infinity% ) 63.3 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
ButtonGroup ▲ +64.5 kB (+Infinity% ) 64.5 kB ▲ +20 kB (+Infinity% ) 20 kB
SwipeableDrawer ▲ +90.7 kB (+Infinity% ) 90.7 kB ▲ +28 kB (+Infinity% ) 28 kB
CardContent ▲ +62 kB (+Infinity% ) 62 kB ▲ +19.3 kB (+Infinity% ) 19.3 kB
Switch ▲ +81.1 kB (+Infinity% ) 81.1 kB ▲ +25.2 kB (+Infinity% ) 25.2 kB
Chip ▲ +71 kB (+Infinity% ) 71 kB ▲ +21.8 kB (+Infinity% ) 21.8 kB
Tab ▲ +76.5 kB (+Infinity% ) 76.5 kB ▲ +24.2 kB (+Infinity% ) 24.2 kB
Container ▲ +63.4 kB (+Infinity% ) 63.4 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
Table ▲ +62.4 kB (+Infinity% ) 62.4 kB ▲ +19.4 kB (+Infinity% ) 19.4 kB
DialogContent ▲ +62.2 kB (+Infinity% ) 62.2 kB ▲ +19.4 kB (+Infinity% ) 19.4 kB
TableBody ▲ +62.1 kB (+Infinity% ) 62.1 kB ▲ +19.3 kB (+Infinity% ) 19.3 kB
Drawer ▲ +84.4 kB (+Infinity% ) 84.4 kB ▲ +26.1 kB (+Infinity% ) 26.1 kB
TableCell ▲ +64.4 kB (+Infinity% ) 64.4 kB ▲ +20.1 kB (+Infinity% ) 20.1 kB
ExpansionPanelSummary ▲ +78.2 kB (+Infinity% ) 78.2 kB ▲ +24.6 kB (+Infinity% ) 24.6 kB
TableFooter ▲ +62.1 kB (+Infinity% ) 62.1 kB ▲ +19.3 kB (+Infinity% ) 19.3 kB
FormControl ▲ +64.8 kB (+Infinity% ) 64.8 kB ▲ +20 kB (+Infinity% ) 20 kB
TableHead ▲ +62.1 kB (+Infinity% ) 62.1 kB ▲ +19.3 kB (+Infinity% ) 19.3 kB
FormLabel ▲ +63.2 kB (+Infinity% ) 63.2 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
TablePagination ▲ +139 kB (+Infinity% ) 139 kB ▲ +40.6 kB (+Infinity% ) 40.6 kB
GridListTileBar ▲ +63.2 kB (+Infinity% ) 63.2 kB ▲ +19.7 kB (+Infinity% ) 19.7 kB
TableRow ▲ +62.5 kB (+Infinity% ) 62.5 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
IconButton ▲ +76.3 kB (+Infinity% ) 76.3 kB ▲ +23.7 kB (+Infinity% ) 23.7 kB
TableSortLabel ▲ +77.5 kB (+Infinity% ) 77.5 kB ▲ +24.4 kB (+Infinity% ) 24.4 kB
InputLabel ▲ +65.1 kB (+Infinity% ) 65.1 kB ▲ +20.2 kB (+Infinity% ) 20.2 kB
Tabs ▲ +85.6 kB (+Infinity% ) 85.6 kB ▲ +27.2 kB (+Infinity% ) 27.2 kB
useMediaQuery -- 2.49 kB ▲ +1 B (+0.10% ) 1.05 kB
TextField ▲ +121 kB (+Infinity% ) 121 kB ▲ +35.4 kB (+Infinity% ) 35.4 kB
BottomNavigation ▲ +62.4 kB (+Infinity% ) 62.4 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
ToggleButton ▲ +76.3 kB (+Infinity% ) 76.3 kB ▲ +24 kB (+Infinity% ) 24 kB
CardActionArea ▲ +75 kB (+Infinity% ) 75 kB ▲ +23.6 kB (+Infinity% ) 23.6 kB
ToggleButtonGroup ▲ +63.5 kB (+Infinity% ) 63.5 kB ▲ +19.8 kB (+Infinity% ) 19.8 kB
ClickAwayListener ▲ +3.91 kB (+Infinity% ) 3.91 kB ▲ +1.59 kB (+Infinity% ) 1.59 kB
Toolbar ▲ +62.3 kB (+Infinity% ) 62.3 kB ▲ +19.4 kB (+Infinity% ) 19.4 kB
DialogTitle ▲ +64.6 kB (+Infinity% ) 64.6 kB ▲ +20.2 kB (+Infinity% ) 20.2 kB
Tooltip ▲ +99 kB (+Infinity% ) 99 kB ▲ +31.3 kB (+Infinity% ) 31.3 kB
Fade ▲ +23.1 kB (+Infinity% ) 23.1 kB ▲ +8.06 kB (+Infinity% ) 8.06 kB
TreeItem ▲ +73.7 kB (+Infinity% ) 73.7 kB ▲ +23.1 kB (+Infinity% ) 23.1 kB
GridList ▲ +62.5 kB (+Infinity% ) 62.5 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
TreeView ▲ +65.9 kB (+Infinity% ) 65.9 kB ▲ +20.6 kB (+Infinity% ) 20.6 kB
InputAdornment ▲ +65.4 kB (+Infinity% ) 65.4 kB ▲ +20.5 kB (+Infinity% ) 20.5 kB
Typography ▲ +63.9 kB (+Infinity% ) 63.9 kB ▲ +19.9 kB (+Infinity% ) 19.9 kB
AppBar ▲ +64.2 kB (+Infinity% ) 64.2 kB ▲ +20 kB (+Infinity% ) 20 kB
Zoom ▲ +23.1 kB (+Infinity% ) 23.1 kB ▲ +8.08 kB (+Infinity% ) 8.08 kB
CardMedia ▲ +62.4 kB (+Infinity% ) 62.4 kB ▲ +19.5 kB (+Infinity% ) 19.5 kB
colorManipulator -- 3.83 kB -- 1.52 kB
ExpansionPanelActions ▲ +62.1 kB (+Infinity% ) 62.1 kB ▲ +19.4 kB (+Infinity% ) 19.4 kB
Hidden ▲ +66.4 kB (+Infinity% ) 66.4 kB ▲ +20.7 kB (+Infinity% ) 20.7 kB
Paper ▼ -69.2 kB (-100.00% ) 0 B ▼ -20.6 kB (-100.00% ) 0 B
@material-ui/core[umd] -- 306 kB -- 88 kB
docs.landing -- 54.3 kB -- 14.3 kB
docs.main -- 599 kB -- 191 kB
Paper ▼ -141 B (-0.23% ) 62.4 kB ▲ +29 B (+0.15% ) 19.3 kB
FormGroup ▲ +62 kB (+Infinity% ) 62 kB ▲ +19.3 kB (+Infinity% ) 19.3 kB
Dialog ▲ +82.5 kB (+Infinity% ) 82.5 kB ▲ +25.6 kB (+Infinity% ) 25.6 kB
Button ▼ -85 B (-0.11% ) 79.6 kB ▲ +326 B (+1.34% ) 24.6 kB

Generated by 🚫 dangerJS against 860b997

- task: PublishPipelineArtifact@0
inputs:
artifactName: 'size-snapshot'
targetPath: 'scripts/sizeSnapshot/build/stats.json'
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't use this for months. It takes now up to 1min extra CI time. Since they are only persisted for 30 days anyway and we can safely reproduce them (since we have a lockfile) if need be I removed it.

@eps1lon eps1lon force-pushed the build/extended-snapshot branch from baecc35 to 8ebfd66 Compare September 30, 2019 09:54
@eps1lon eps1lon force-pushed the build/extended-snapshot branch from 4c06c9d to 6080e95 Compare October 1, 2019 12:39
@eps1lon eps1lon marked this pull request as ready for review October 1, 2019 14:49
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The cost is about +1 min in the build, seem ok, I expect we can parallelize it in the future if needed.

I have noticed the following in the report:

  • /core/Paper is present twice, once with 0 reported size.
  • A few items have a /core/ prefix (TextareaAutosize, useMediaQuery, Popper). Is this expected?

scripts/sizeSnapshot/webpack.config.js Outdated Show resolved Hide resolved
dangerfile.js Show resolved Hide resolved
scripts/sizeSnapshot/webpack.config.js Show resolved Hide resolved
@eps1lon
Copy link
Member Author

eps1lon commented Oct 2, 2019

/core/Paper is present twice, once with 0 reported size.

The snapshot that was removed is the commonJS version. Tracking the bundle size for commonJS is not that interesting since they are only used on server(less) targets.

A few items have a /core/ prefix (TextareaAutosize, useMediaQuery, Popper). Is this expected?

Yeah but it's not really necessary. I'll remove it.

@oliviertassinari
Copy link
Member

Do you know why the reported size of @material-ui/core has increased? Should it match bundlephobia.com report?

@eps1lon
Copy link
Member Author

eps1lon commented Oct 3, 2019

Do you know why the reported size of @material-ui/core has increased?

Probably overhead from too many chunks. I don't like it either but having individual components tracked is IMO more useful than the bundle as a whole. Nobody (should) pull this in as a whole anyway.

Should it match bundlephobia.com report?

I tend to not trust these. Everybody uses a different bundler/config so they're a bad advertising tool to begin with.

@oliviertassinari oliviertassinari merged commit 9122b60 into mui:master Oct 3, 2019
@eps1lon eps1lon deleted the build/extended-snapshot branch July 7, 2020 07:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
docs Improvements or additions to the documentation
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants