New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

`import { Button } from 'react-bootstrap';` imports the entire library #2683

Closed
x-yuri opened this Issue Jul 2, 2017 · 5 comments

Comments

Projects
None yet
6 participants
@x-yuri
Copy link

x-yuri commented Jul 2, 2017

I'm not sure where else to report, so feel free to point me in the right direction.

The documentation says:

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.

Then:

Es6 modules aren't supported natively yet, but you can use the syntax now with the help of a transpiler like Babel.

import Button from 'react-bootstrap/lib/Button';
// or
import { Button } from 'react-bootstrap';

From output of webpack --display-modules I can see a lot of other components being imported (all of them, most likely):

 [323] ./~/react-bootstrap/es/Accordion.js 839 bytes {0} [built]
 [324] ./~/react-bootstrap/es/Alert.js 2.21 kB {0} [built]
 [325] ./~/react-bootstrap/es/Badge.js 2.11 kB {0} [built]
 [161] ./~/react-bootstrap/es/BreadcrumbItem.js 2.05 kB {0} [built]
 [326] ./~/react-bootstrap/es/Breadcrumb.js 1.46 kB {0} [built]
 [162] ./~/react-bootstrap/es/ButtonGroup.js 2.41 kB {0} [built]
  [58] ./~/react-bootstrap/es/Button.js 3.13 kB {0} [built]
 [327] ./~/react-bootstrap/es/ButtonToolbar.js 1.42 kB {0} [built]
 [329] ./~/react-bootstrap/es/CarouselCaption.js 1.67 kB {0} [built]
...

Which is kind of expected. In the sense that import { Button } from 'react-bootstrap'; is supposed to require the entire library, but make available only Button part. Am I missing something?

@taion

This comment has been minimized.

Copy link
Member

taion commented Jul 2, 2017

Use the react-bootstrap/lib import. Tree-shaking doesn't work reliably enough.

@taion taion closed this Jul 2, 2017

@nickmccurdy

This comment has been minimized.

Copy link

nickmccurdy commented Sep 3, 2017

Is there a reason why this doesn't support tree shaking? Is this blocked by something actionable like initial release or webpack 2, or is it just a general issue with how this library and tree shaking are designed?

@jquense

This comment has been minimized.

Copy link
Member

jquense commented Sep 3, 2017

It's not about supporting treeshaking. It's just that treeshaking isn't very good. It's much more reliable to import just what you need

@valmassoi

This comment has been minimized.

Copy link

valmassoi commented Oct 5, 2017

+1 @x-yuri did you figure out how to reduce the bundle

@chendayang

This comment has been minimized.

Copy link

chendayang commented Apr 20, 2018

the doc said" import individual components from react-bootstrap/lib rather than the entire library"
i think its just a little inconvenience.

marilyn79218 pushed a commit to marilyn79218/webpack-experiment that referenced this issue Jan 17, 2019

Ray Lei Ray Lei
1. Import react-bootstrap library (RB). 2. Bundle RB-components what …
…we really used only. 3. webpack --display-module CLI in config. (See: react-bootstrap/react-bootstrap#2683).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment