Optimization in importing

--I want to discuss about optimization.

Here are 2 ways of importing components.

first case import { Accordion, Button, Modal } from 'react-bootstrap';

second case

import Accordion from 'react-bootstrap/Accordion';
import Button from 'react-bootstrap/Button';
import Modal from 'react-bootstrap/Modal';

Which is better in optimization scope? Or same? Thanks

Currently I'm using the first case import { Accordion, Button, Modal } from 'react-bootstrap';

Is it correct?

CodePudding user response：

Both ways of importing the Accordion component from the react-bootstrap library are valid.
The first case imports all exports from the react-bootstrap library and then specifically pulls out the Accordion component & the second case only imports the Accordion component directly.

The choice between the two would depend on the specific use case and project structure. If you only need to use the Accordion component and not any other exports from the react-bootstrap library, the second case would be more efficient. If you plan to use multiple exports from the react-bootstrap library, the first case would be more convenient.

CodePudding user response：

If you not mention about something like number lines of code, performance and coding convention (rule by your team) , both of them is fine.

When you use the first one, it's also decrease number lines of code from your component. With the second one, imaging you have multiple component, maybe over 1000 component you will have 1000*n (number of library) lines of code for importing. In fact, Webpack goes through all your package and creates what it calls a dependency graph which consists of various modules which your webapp would require to function as expected. Then, depending on this graph, it creates a new package which consists of the very bare minimum number of files required, often just a single bundle.js file which can be plugged in to the html file easily and used for the application. So, your bundle size will be decreased and can improve performance of your application when deploying in production environment.

CodePudding user response：

It depends on the way particular component/constant is exported.

What I mean is if you have any default export then you can import as per first example you mentioned.

All other exported members can be imported within the {}.

1 default export:

export default TestComponent {}

can be imported as

import TestComponent from './somepath/test.component';

2 export only:

export TestComponent {}

should be imported as:

import { TestComponent } from './somepath/test.component';

---

To add more in this answer is that if you are importing from each Component then you are actually importing the default export from that particular library.

So for each component you have to add respective import.

While in the second case you are importing from the base library and those are just exported members not default exported.