[Modal] -74% bundle size reduction when used standalone

[oliviertassinari]

I wanted to try this change for months! #5750 gave me enough energy to start. The core idea behind this change is that we document the Modal component as a good starting point to build a Modal (outside of Material Design). This vision can only be achieved with an outstanding small bundle size.

This change doesn't help people already using @material-ui/styles and our theme. But it reduces the entry cost for new developers. A developer can progressively add our generic components, with only paying for what he needs.

Modal | -74.06% | -72.43% | 79,337 | 20,578 | 23,972 | 6,609

From 23.4 kB gzipped to 6.5 kB gzipped. We can still do better. The react hooks migration will help. We should be able to go down to 5.5 kB.

• vs https://bundlephobia.com/result?p=react-modal
• vs https://bundlephobia.com/result?p=@reach/dialog

Breaking change

Remove the classes customization API for the Modal component.

[mui-pr-bot]

@material-ui/core: parsed: 0.00% 😍, gzip: +0.17%

Details of bundle changes.

Comparing: 387b79e...fa21113

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	0.00%	+0.17% 🔺	311,042	311,048	84,214	84,353
@material-ui/core/Paper	0.00%	+0.05% 🔺	67,279	67,279	19,970	19,980
@material-ui/core/Paper.esm	+0.07% 🔺	-0.03%	60,640	60,685	18,897	18,892
@material-ui/core/Popper	-0.01%	+0.07% 🔺	31,115	31,113	10,793	10,801
@material-ui/core/Textarea	0.00%	-0.04%	5,472	5,472	2,367	2,366
@material-ui/core/TrapFocus	0.00%	-0.06%	3,731	3,731	1,565	1,564
@material-ui/core/styles/createMuiTheme	+0.28% 🔺	+0.14% 🔺	15,898	15,943	5,770	5,778
@material-ui/core/useMediaQuery	0.00%	+0.10% 🔺	2,106	2,106	973	974
@material-ui/lab	+0.03% 🔺	-0.19%	140,720	140,760	42,642	42,560
@material-ui/styles	0.00%	+0.03% 🔺	50,833	50,835	15,019	15,023
@material-ui/system	0.00%	+0.03% 🔺	11,765	11,765	3,922	3,923
Button	+0.05% 🔺	+0.09% 🔺	85,622	85,663	25,618	25,640
Modal	-74.06%	-72.43%	79,337	20,578	23,972	6,609
colorManipulator	0.00%	0.00%	3,904	3,904	1,543	1,543
docs.landing	0.00%	0.00%	51,154	51,154	11,250	11,250
docs.main	+0.11% 🔺	+0.06% 🔺	648,059	648,749	202,187	202,317
packages/material-ui/build/umd/material-ui.production.min.js	+0.16% 🔺	+0.13% 🔺	292,088	292,546	82,119	82,227

Generated by 🚫 dangerJS against fa21113

[eluchsinger]

@oliviertassinari just a question: Why did the bundle grow (gzip: +0.17%), if the Modal shrank?

[oliviertassinari]

This change doesn't help people already using @material-ui/styles and our theme. But it reduces the entry cost for new developers. A developer can progressively add our generic components, with only paying for what he needs.

@eluchsinger It's because of a simplified default backdrop.

[oliviertassinari]

Also, we shouldn't look at the gzipped diff that much. It dependents on the heuristic the compressions the algorithm uses. The parsed one is often more "stable" (more stability to code changes).