2

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)

Matthias
  • 102
  • 2
  • 19
  • [@mui/base](https://mui.com/base-ui/getting-started/) is what is used by `@mui/material` to give you all the material styled components, like the ones you have an import for. – 0xts Aug 11 '23 at 16:40

1 Answers1

0

Use the babel-plugin-import plugin. This plugin will allow you to import specific components from the @mui/base module, rather than importing the entire module. This will reduce the size of your bundle, since you won't be importing components that you're not using.

To use this plugin, you'll need to install it with the following command:

yarn add -D babel-plugin-import

Then, you'll need to add the following configuration to your .babelrc.js file:

plugins: [
  [
    "babel-plugin-import",
    {
      libraryName: "@mui/material",
      libraryDirectory: "esm",
      style: "css",
      // Only import the components that you're using
      components: ["Tabs", "Grid", "Link"],
    },
  ],
]

Once you've done this, you can try re-building your app and you should see that the size of the @mui/base module has been reduced.

Or

Use the @mui/material/minified package. This package provides a minified version of the @mui/base module. This can be a good option if you're concerned about the size of your bundle, and you don't need to use any of the advanced features of the Material UI components.

To use this package, you'll need to install it with the following command:

yarn add @mui/material/minified

Then, you can import the @mui/base module as usual.

DEV JAIN
  • 1
  • 2