[docs-infra] Document bundle size of each component

[oliviertassinari]

Summary

Bundle size matters. I think it's important we document it in the docs. Documenting:

• Forces us to measure it
• Means developers know we know what it is
• Means developers easily know if it's good enough for their use cases

For example, see https://github.com/propeldata/ui-kit/issues/157 who are looking for a select component, there is a reputation for bloat to debunk (Base UI) and solve (Material UI).

Examples

I tried two iterations:

• https://github.com/mui/material-ui/pull/40592
• https://github.com/mui/material-ui/pull/40549

but never had time to work on this to finish it (It's why I was eager to fill: https://www.notion.so/mui-org/React-Engineer-Docs-infra-02023ab7104241888ca2ab3bcb32e19d). I was more trying to fix a regression in the DX.

Motivation

It's related to #201.

Closing this I think involves two steps:

• [ ] Implementing it for Base UI
• [ ] Supporting it for docs-infra so Material UI can also show components' size (assuming we fix their size)

Search keywords: -

[atomiks]

Displaying bundle size accurately is a difficult problem. If you only use one single component from the library, then it’s fully accurate. However once you start using multiple components, the numbers become inaccurate as the sizes don’t add up simply/cumulatively as displayed due to shared dependencies/logic/compression, etc.

I propose we take a non-naive approach to this. https://bundlejs.com allows you to export the specific components you're actually using, treeshaking enabled, to see a true picture. We could have a UI for this on the website where they select all the components they're using/will decide to use to get a true picture of the bundle size.

[oliviertassinari]

Oh, I forgot I had opened https://github.com/mui/material-ui/issues/40591. The best I could figure out in the past was https://github.com/pastelsky/bundlephobia/issues/389.