Proposal: collect the MUI components in single src/ui.tsx

[marcinkoziej]

My DX painpoint is having to import every @material-ui/core component separately in every file.

1. It breaks my flow of writing a component, because I have to jump up to top to add an import
2. It leaves unused imports, if I delete the particular component from the file. I should also remove the import, but it's a chore, and I am incentivized not to do it - i might use that ListItem or Avatar after all in next 10 minutes.

The reason we do it this way is that we believe it will make the bundle smaller. Are we 100% sure it's the case? Is not tree-shaking smart enough to be able to figure out what is used and what not?

I would rather have one:
import mui from '@material-ui'; and use it with prefix: <mui.List>` and so on.

If this would really make the bundle insanely big, my proposal is to create src/ui.tsx which re-exports the most used components. This would actually be an opportunity to standardize the way we use MUI, add styling in central place, maybe create some "flavors" of components that would serve as re-usable pieces of UI we use across dashboard, to not re-invent the wheel every time starting off the stock mui components.

Benefits:

1. Just one import: import ui from 'src/ui'.
2. Consistent style in app, we could style some components globally using styled-component pattern, which is recommended for MUIv5

Drawbacks:

1. <ui.Foo> instead of <ui.Foo> so 3 chars more per tag.

Reading

• There is a guide on minimal bundle size here https://mui.com/guides/minimizing-bundle-size/ but it does not give good ideas how to avoid import hell. They suggest a "hack" with babel plugin that auto imports, but this will not work with esbuild (which skips babel to be "fast").

• GH discussion where MUI devs show how much they do not have a good idea on how to make tree-shaking work Bundle size with ES modules mui/material-ui#11281 (comment)