Optimization in importing

Optimization in importing

Publish Date: May 18 '21
0 2

I want to discuss about optimization.
Here are 2 kinds 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

Comments 2 total

  • Ankush Lokhande
    Ankush LokhandeJan 17, 2023

    Hi @reacthunter0324
    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.

    • React Hunter
      React HunterJan 19, 2023

      Hi @ankushppie
      Thanks for your comment.
      Yeah, above code are gonna use 3 components from react-bootstrap library, so the first code should be better, right?
      Thank you very much!

Add comment