Skip to content
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 · 10 comments
Closed

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

x-yuri opened this issue Jul 2, 2017 · 10 comments

Comments

@x-yuri
Copy link

@x-yuri 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
Copy link
Member

@taion 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
Copy link
Contributor

@nickmccurdy 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
Copy link
Member

@jquense 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
Copy link

@valmassoi valmassoi commented Oct 5, 2017

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

@chendayang
Copy link

@chendayang 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
…we really used only. 3. webpack --display-module CLI in config. (See: react-bootstrap/react-bootstrap#2683).
@AlvinLaiPro
Copy link

@AlvinLaiPro AlvinLaiPro commented Apr 7, 2020

Just add sideEffects: false to package.json and it will do the trick.

@pot-code
Copy link

@pot-code pot-code commented May 1, 2020

Just add sideEffects: false to package.json and it will do the trick.

Don't do that in practice, as it may cause unexpected issues. I have once encountered a problem that purgecss-loader swept all my CSS, just because sideEffects was set false.

You may set sideEffects: false only in rules like jsx/js/tsx/ts etc, just don't set it globally.

@derykmarl
Copy link

@derykmarl derykmarl commented May 20, 2020

I'm here because I was googling for why the second notation was in the documentation as "less ideal".

But.. am I missing something here... "sideEffects": false is already in the package.json for react-bootstrap? So does it actually still matter?

The Gatsby-React-Bootstrap-Starter project uses the second notation and I'd have to note that the existing index page example of
import { Row, Col, Container, ListGroup } from "react-bootstrap"

looks a lot tidier in the code than changing it to

import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Container from 'react-bootstrap/Container';
import ListGroup from 'react-bootstrap/ListGroup';

n.b. I am new to React.

@jquense
Copy link
Member

@jquense jquense commented May 20, 2020

It matters unless you are auditing your bundling regularly to ensure they don't include extra things. The core tension here is that cherry picking imports is more manual but always results in including only what you need. Relying on treeshaking may result in closing what you want. Treeshaking is finiky compiler optimization it's not a guarentee. You can choose the approach you want, our recommendation tho is still relevant

@derykmarl
Copy link

@derykmarl derykmarl commented May 20, 2020

Okay that seems to make sense, thanks for clarifying!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
9 participants