1

I am trying to optimize my vendor bundle.js as it has swollen up and i am using the material-ui library. 

import Card from 'material-ui'; // Very bad as this will import everything

Can someone tell me what the difference between the two import statements are in terms of size of js code imported into your app or are they the same. 

import { Card } from 'material-ui';
import Card from 'material-ui/Card'
Nitish Phanse
  • 552
  • 1
  • 9
  • 16

3 Answers3

1
import Card from 'material-ui';

This will import whatever is being exported using default in material-ui as Card defined in the import.

import { Card } from 'material-ui';

This will import the named export Card (assuming Card exists) from material-ui.

Please refer to the following stack overflow post for more information.

When should I use curly braces for ES6 import?

NotARobot
  • 978
  • 2
  • 14
  • 36
1

In this case, they are the same.

The import 

import { Card } from 'material-ui';

corresponds to importing an exported member called Card from the root. Looking at the source code, we see that it looks like this:

export Card from './Card';

which imports the default export from ./Card (which is material-ui/Card).

The second import

import Card from 'material-ui/Card'

imports the default export from material-ui/Card, which we just showed is exactly what the first import did.

Therefore, they are the same.

Dominic K
  • 6,975
  • 11
  • 53
  • 62
  • I don't think they are the same. Please correct me if I'm wrong, but I think `import { Card } from 'material-ui';` will include the whole library in the bundle unless the bundler you are using have support for tree-shaking. material-ui seems to be using es6 modules which can take advantage of that optimization. On the other hand `import Card from 'material-ui/Card'` will only include the Card component along side with its dependencies. – pablogq Sep 02 '17 at 07:46
1

The main difference is in the compiled code. In order to improve the performance, the first option:

import Card from 'material-ui/Card'

is the best one because it goes directly to the module you are requesting for.

In the second option:

export Card from './Card'

Babel uses transform-export-extension plugin to compile the code so the compiled code is bigger than the first option.

Arnold Gandarillas
  • 3,896
  • 1
  • 30
  • 36