speed up build by fixing mui imports

[mattcasey]

You're supposed to import MUI components individually, but I know this is had to remember, it's ugly, and hard to enforce:

import Box from '@mui/material/Box';
vs
import { Box } from '@mui/material';

See: https://mui.com/guides/minimizing-bundle-size/

The next.js maintainers believe this is part of why dev can take so long: vercel/next.js#29559. THey suggest using a special babel plugin, however that means you can't use the SWC compiler (written in Rust and much faster). So I found someone created a similar plugin and implemented that instead. Seems to be working, although the final build size has not changed, I Noticed that mentions of "@mui/icons-material" went from almost 10,000 to about 150 in the '.next/trace' file.

Another alternative is to use babel compiler with this config: https://mui.com/guides/minimizing-bundle-size/#option-2. I haven't tried it yet, but we'd be have do swap the Rust compiler (SWC) with babel, which is slower.

[Devorein]

Yeah the issue is that vscode auto-import doesn't show that as an option most of the time. I agree about not choosing Babel over SWC, we should definitely choose Rust over JS.

[mattcasey]

OK I went off the deep end and realized that next's swc loader is not passing down the plugin option. SO I opened a PR there: vercel/next.js#35156

[mattcasey]

Apparently that 'plugin' is just an swc-loader feature, but next.js is working on a better fix here: vercel/next.js#34969