Why shouldn't you use import all in ES6

Question

So I recently started learning react and noticed that all the documentation has imports that look like else:

import { Apples, Bananas, Oranges } from 'fruits';

But while studying react I found that this syntax works just as well:

import * as Fruits from 'fruits';

My Question: Is there any performance loss or logical conflict with using the import all syntax?

If there is not then I will just keep using that syntax. I would rather be a little more verbose and not have to worry about making sure everything has been imported.

Answer 1

It would be better to use the first way. At least for one thing: Always write explicitly what you want to use. It's a best practice in all framework / language.

If you have some tree-shaking, some unused module won't be loaded and everything should be good (like @zerkms said). But it's in the best world case, even the best tree shaking isn't perfect and you could have some import still being imported even if you don't use them. If your project is 'small' it should be ok. If in your project you load hundreds stuff, it could be a little bit different.

And when you will build your project, you will loose time with the tree-shaking analysis too.

So just because you don't want to "loose time by writing two words" you will loose time on every build and maybe have a performance impact