Sunday 13 August 2023

MUI does not do proper Tree Shaking in Next.js

I set up a react app using next.js and analyzed the bundle size for the client and noticed that whenever i import any mui component it adds a module called @mui/base which is extremly big if you consider the fact that I am only using 3 mui components right now (Tabs, Links and Grid).I tried to do it as the official mui docs recommend it (https://mui.com/material-ui/guides/minimizing-bundle-size/ option 1), but no luck.

These are the imports right now in my page.js in the app folder:

import Tabs from '@mui/material/Tabs';
import Grid from '@mui/material/Grid';
import Link from '@mui/material/Link';

Is there a way i can get rid of or reduce the size of mui base like only import a part of it? I'm new to mui so i don't even know what mui base is for.

enter image description here)



from MUI does not do proper Tree Shaking in Next.js

No comments:

Post a Comment