-1

I heard that there are two different ways of importing components/modules.

  1. Component way
  2. Library way

Anybody has an idea about these concepts?

Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162
  • 1
    Find a tutor for this question. This is not the place for this question – Anandhu Nadesh Jan 02 '18 at 11:17
  • 1
    possible duplicate of https://stackoverflow.com/questions/41768205/difference-between-import-react-and-import-component-syntax. – Fatemeh Abdollahei Jan 02 '18 at 11:18
  • Have you tried searching on the internet?? I'm 100% sure, you're not the first person having this question. This Sounds like a homework question, too. What is your exact use-case? – cramopy Jan 02 '18 at 11:20
  • Guys I was unable to find an answer in stackoverflow so posted here as most of us looking at stack overflow for best solution to the problem. I heard that there is a key difference and it has performance improvement. – Hemadri Dasari Jan 02 '18 at 11:26
  • Hi! Could you please provide examples of what you regard as a component and a library way, otherwise it's not clear – Daniel Khoroshko Jan 02 '18 at 11:35
  • Yes! It seems there are two ways of importing a component. 1. Component way 2. Library way e.g.: import {Button} from ‘React-bootstrap’; which I think component way and import Button from ‘React-bootstrap/lib/Button’; which is library way I guess but I am not sure. So as per my understanding when we do import in component way the whole library loads instead of one. I am not sure about the difference and that’s why looking for best answer. – Hemadri Dasari Jan 02 '18 at 11:41
  • This [Diff b/w importing components in componentway and library way](https://stackoverflow.com/questions/34239731/how-to-minimize-the-size-of-webpacks-bundle) answers my question. It has clear explanation. – Hemadri Dasari Jan 10 '18 at 01:43

2 Answers2

2

Take a look at the root index of material-ui. If you import something from this index, you are loading everything that is exported, which ends up being the entire library in this case. If you are not tree-shaking, your bundle will include everything exported by the library and all of its dependencies (whether you use them or not).

It is best to import from the component index (see Button/index.js), because you keep your consumption of the library to a minimum:

import Button from ‘material-ui/Button’;

This issue comes up a lot with lodash and is covered in the mui docs: Minimizing Bundle Size

Ken Gregory
  • 7,180
  • 1
  • 39
  • 43
  • Thanks Ken! But what I am trying to understand is that when we import from root index the entire library will load but what we call this. Is this component / library way of importing? – Hemadri Dasari Jan 03 '18 at 03:05
  • Read this: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import – Ken Gregory Jan 03 '18 at 04:30
0

I found solution to my question. Below is what I was looking for

Library way of importing

import { Button } from 'react-bootstrap';
import { FlatButton } from 'material-ui';

This is nice and handy but it does not only import Button and FlatButton (and their dependencies), but the whole libraries.

Component way of importing

One way to alleviate this is to try to only import or require what is needed, let's say the component way. Using the same example:

import Button from 'react-bootstrap/lib/Button';
import FlatButton from 'material-ui/lib/flat-button';

This will only bundle Button, FlatButton and their respective dependencies. But not the whole library. So I would try to get rid of all your library imports and use the component way instead.

If you are not using lot of components then it should reduce considerably the size of your bundled file.

kelvinelove
  • 550
  • 7
  • 19
Hemadri Dasari
  • 32,666
  • 37
  • 119
  • 162