CODEWITHSUNDEEP
javascriptes6-modules
shertu
shertu

Reputation: 531

How to do ES6 imports for optimized builds?

Which of the following should I use:

import { Button } from 'react-bootstrap';

or

import Button from 'react-bootstrap/Button';

The former has the advantage of using the correct name for the component so I do not understand why I should use the latter approach to ES6 imports.

Upvotes: 0

Views: 561

Answers (2)

Charlie
Charlie

Reputation: 23858

The difference in this case is how the packages are arranged.

import { Button } from 'react-bootstrap';

This one actually loads the entire bootstrap package - but it only imports the Button section to your module. The {Button} part can be considered destructuring only one property of a large object.

import Button from 'react-bootstrap/Button';

This one only loads the Button section and the it doesn't have to do any destructuring - because, what is loaded is only the Button section.

The second approach is better - because, it has to load only the code that you explicitly specify.

Upvotes: 2

Amadan
Amadan

Reputation: 198556

It is not a matter of ES6. The two statements do two different things.

import Button from 'react-bootstrap/Button';

This loads the file react-bootstrap/Button.js and returns its default export.

import { Button } from 'react-bootstrap';

This loads the file react-bootstrap/index.js, and returns the Button export. index.js imports the default export from Button.js, and exports it as Button in this line:

export { default as Button } from './Button';

If this line weren't there, you would not be able to use the second form.

Upvotes: 1

Related Questions