1

I am quite curious about these imports.

import Button from "react-bootstrap/lib/Button";
import { Button } from "react-bootstrap";

They both load button very well, but does it matter on final size of the bundle?

Paul
  • 35,689
  • 11
  • 93
  • 122
emil
  • 6,074
  • 4
  • 30
  • 38
  • Have you tried both an compared the bundle sizes? – m_callens Jul 31 '17 at 20:20
  • @Kinduser You're the gold badge holder. Did you read the question? Your link isn't related. I've already voted to reopen, but I don't have a gold badge... – Andrew Li Jul 31 '17 at 20:22
  • 2
    This is not a duplicate. Ignoring the curly braces part of the question, the answer is that you will save space by doing the first import. If you look at what the second one is importing (https://github.com/react-bootstrap/react-bootstrap/blob/master/src/index.js), you see that it imports every single component and then only uses the first one. So if you use the first one instead, a good bundler would not include all the other react-bootstrap components that you are never using. – csander Jul 31 '17 at 20:25
  • thanks for answer @csander – emil Jul 31 '17 at 20:25
  • 1
    @Kinduser I apologize, but you have to understand the frustration I feel when I'm trying to answer a legitimate question, but I can't because someone's marked it incorrectly without reading the question thoroughly. Just be more careful with your hammer in the future. It's a privilege. – Andrew Li Jul 31 '17 at 20:35

1 Answers1

5

Yes, in fact, it does matter in regards to the final bundle size in this specific case. Per the React Bootstrap Documentation:

Bundle size optimization

If you install React-Bootstrap using npm, you can import individual components from react-bootstrap/lib rather than the entire library. Doing so pulls in only the specific components that you use, which can significantly reduce the size of your client bundle.

The emphasis is mine. The above confirms that importing from a specific file in a subdirectory at react-bootstrap/lib reduces bundle size as bundlers will not include the whole library which would happen if you imported directly from the library with import { Button } from 'react-bootstrap'.

Another thing to note is that bundlers such as Webpack do have features such as tree-shaking to remove unnecessary modules when only importing a certain part of a library but it's not working reliably with React Bootstrap yet, so prefer the first choice for bundle size optimization. As for other cases with other libraries, it depends on if tree-shaking can be reliably used, and in that case it shouldn't matter which way you import a component of the library.

Community
  • 1
  • 1
Andrew Li
  • 55,805
  • 14
  • 125
  • 143
  • Thanks for your answer @andrew Li! – emil Jul 31 '17 at 20:35
  • @Andrew Li hey I'm confused here about import { Button } from 'react-bootstrap' will import whole library. From my understanding it will only imported the button component not whole library, can you explain a little bit more ? Thank you :) – Kim Aug 27 '17 at 10:07
  • @Kim Sure. When you do `import { Button } from 'react-bootstrap'` you're importing from `react-bootstrap`'s [`index.js`](https://github.com/react-bootstrap/react-bootstrap/blob/master/src/index.js). This file imports all the components in the library then re-exports them. Thus, it includes the whole library. But if you do `import Button from 'react-bootstrap/lib/Button'` you only import thr [`Button.js`](https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Button.js) file which does not include all the library's files. Thus the bundle size is smaller. – Andrew Li Aug 27 '17 at 14:04