[RFC] babel-plugin-optimize-material-ui

[eps1lon]

Just drafting some ideas. Any input welcome.

prop tree-shaking

Now that we have full module tree-shaking support for our components it's only logical to go the next step and enable prop tree-shaking.

Consider the following component:
<TextField variant="outlined" />

With this component you will not only get all three variants of the TextField but also the Select component. It would be better for bundle size and perf if only the OutlinedInput is included in the bundle.

We could create an OutlinedTextField component and replace the above usage with <OutlinedTextField />. Either by rewriting <TextField /> to only consist of pattern matching that delegates the props to these new components or with the help of some compiler (do they exists?) that can analyze code paths and strip out unused ones (sounds like a job for code coverage analysis).

Possible candidates:

• TextField
• Button
• ListItem (button prop)

other ideas?

There may be more optimizations possible. In general build time flags and rollup sounds like a good fit. This might already be good enough to auto-generate more focused components.

Prior art

This is similar to facebook/react#7323 but instead of inlining we could split up a component into 3 and use that. This could then be further optimized by inlining.