我们应该在使用Create-React-App时导入整个库或特定的单个组件吗？

Question

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 components like: react-bootstrap/Button rather than the entire library. Doing so pulls in only the specific components 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 components 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 components?

Answer 1

Here are the two examples given by the docs:

import Button from 'react-bootstrap/Button';

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

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

This method imports the entire library and adds the Button component 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/