javascript - Should we import a whole library or a specific individual component when using along Create-React-App? - Stack Over

admin管理员组

文章数量:1025259

I am asking this on performance/optimizing issue. I realize that all libraries (and their default export method) are different but for example on react-bootstrap's doc intro it states that

You should import individual ponents like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific ponents that you use, which can significantly reduce the amount of code you end up sending to the client.

Since we are in 2019, does Create-React-App's (CRA) build automatically optimize for us and only import those ponents who have been used at least once?

If so, does that mean that we can ignore the advice and import the whole library instead of specific ponents?

I am asking this on performance/optimizing issue. I realize that all libraries (and their default export method) are different but for example on react-bootstrap's doc intro it states that

You should import individual ponents like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific ponents that you use, which can significantly reduce the amount of code you end up sending to the client.

Since we are in 2019, does Create-React-App's (CRA) build automatically optimize for us and only import those ponents who have been used at least once?

If so, does that mean that we can ignore the advice and import the whole library instead of specific ponents?

• javascript
• reactjs
• react-native
• deployment
• create-react-app

Share Improve this question Follow asked May 15, 2019 at 14:29 SayyoraSayyora 52366 silver badges1818 bronze badges 1

• CRA relies on Webpack, which is responsible for tree-shaking. Webpack analyzes all imports for possible side effects (i.e. the named import uses other functions that also need to be imported). Tree-shaking relies on the 3rd party lib to properly write ponents that do not have side effects. I would follow the advice of the library you are using, Bootstrap, which is telling you exactly how to import the Components to reduce the bundle size. Don't ignore their remendation. – lux Commented May 15, 2019 at 14:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Here are the two examples given by the docs:

import Button from 'react-bootstrap/Button';

This is the remended way to import. In this case, you are explicitly importing the ponent from the library.

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

This method imports the entire library and adds the Button ponent to the scope of that file. This case uses Webpack's tree shaking functionality to reduce the bundle size, which is not entirely reliable. This article provides insight on why that's the case: https://advancedweb.hu/2017/02/07/treeshaking/

I am asking this on performance/optimizing issue. I realize that all libraries (and their default export method) are different but for example on react-bootstrap's doc intro it states that

You should import individual ponents like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific ponents that you use, which can significantly reduce the amount of code you end up sending to the client.

Since we are in 2019, does Create-React-App's (CRA) build automatically optimize for us and only import those ponents who have been used at least once?

If so, does that mean that we can ignore the advice and import the whole library instead of specific ponents?

I am asking this on performance/optimizing issue. I realize that all libraries (and their default export method) are different but for example on react-bootstrap's doc intro it states that

You should import individual ponents like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific ponents that you use, which can significantly reduce the amount of code you end up sending to the client.

Since we are in 2019, does Create-React-App's (CRA) build automatically optimize for us and only import those ponents who have been used at least once?

If so, does that mean that we can ignore the advice and import the whole library instead of specific ponents?

• javascript
• reactjs
• react-native
• deployment
• create-react-app

Share Improve this question Follow asked May 15, 2019 at 14:29 SayyoraSayyora 52366 silver badges1818 bronze badges 1

• CRA relies on Webpack, which is responsible for tree-shaking. Webpack analyzes all imports for possible side effects (i.e. the named import uses other functions that also need to be imported). Tree-shaking relies on the 3rd party lib to properly write ponents that do not have side effects. I would follow the advice of the library you are using, Bootstrap, which is telling you exactly how to import the Components to reduce the bundle size. Don't ignore their remendation. – lux Commented May 15, 2019 at 14:45

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

Here are the two examples given by the docs:

import Button from 'react-bootstrap/Button';

This is the remended way to import. In this case, you are explicitly importing the ponent from the library.

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

This method imports the entire library and adds the Button ponent to the scope of that file. This case uses Webpack's tree shaking functionality to reduce the bundle size, which is not entirely reliable. This article provides insight on why that's the case: https://advancedweb.hu/2017/02/07/treeshaking/

本文标签：