Is there a difference between these two Material-UI import methods?

Question

When using material-ui, I've been following the docs and importing using the method below

import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';

however, I recently came across some code where the above would have instead been imported as

import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';

The second method of importing obviously looks much cleaner, so is there any reason the docs and most code you'll find online all import it the first way?

Possible duplicate of [When should I use curly braces for ES6 import?](https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import) — Anshul Bansal, Jun 04 '19 at 15:45

score 5 · Answer 1 · answered Jun 04 '19 at 16:29

material-ui is a library with a lot of components. In the first case you have imported just those components that you need in your project:

import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';

In the second case

import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';

you have imported all components, even those you don't need. This could greatly increase the size of a bundle with unused dead-code in case if your module bundler has no tree shaking functionality.

I recommend you to use import {...} from '@material-ui/core' only if you know that your module bundler has tree shaking and you switched on this functionality. Or you could use this case if you using almost all components from @material-ui/core.

You could react about tree shaking in webpack here

Even if your bundler has tree shaking, it probably won't be enabled in development mode. I have found that importing each one individually saved a lot of build time in development mode. — Matt H, Jun 04 '19 at 16:31
I agree with @MattH: as it says in the [docs](https://mui.com/guides/minimizing-bundle-size/#:~:text=Development%20bundles%20can,top%2Dlevel%20API.): "Startup times can be approximately **6x slower** than without named imports from the top-level API." (development mode). So if you want to speed up your dev start up time, prefer `path imports` or use `babel-plugin-import` as described in the MUI docs. — Andrii Lukianenko, Dec 08 '21 at 11:32

Dennis Vash · Accepted Answer · 2019-06-04T16:31:40.350

In this way you importing the whole package:

import { Dialog, DialogTitle, DialogContent } from '@material-ui/core';

However, you can import individual components on demand:

import Dialog from '@material-ui/core/Dialog';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContent from '@material-ui/core/DialogContent';

If you using VSCode, you can check the import size using Import Cost extension.

It's important to mention that there are plugins for importing components on demand like babel-plugin-import, in this way you import individual components under the scene.

score 1 · Answer 3 · answered Jun 04 '19 at 16:27

In the first case, the only 3 components will be included in a bundle because you import 3 files. In the second case - you import the core library in a bundle and use only 3 components from it. But bundle builder should remove unused components, so you should check your bundle with tools like https://www.npmjs.com/package/webpack-bundle-analyzer to see if you import unused code or not.

Is there a difference between these two Material-UI import methods?

3 Answers3

Linked