Why shouldn't you use import all in ES6

user_3511423 0
Viewed 1725

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.

es6-modules reactjs ecmascript-6 javascript
3 Answers

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

user_26422500

Actually - it depends on the amount of exports from given module.

If you import e.g. Lodash you might not want to import whole library, you should import only these methods which you are going to use in your application:

import { isEmpty, pickBy, orderBy } from 'lodash';

to avoid performance loss and memory waste.

However, if your given module holds just a few methods or basically you are going to use every single export, then you can freely use that shortcut:

import * as Fruits from 'fruits';

Note: I suppose you are using webpack 2, which actually includes three-shaking algorithm which makes minifying the bundle possible.

user_66959240

That depends upon what module bundler you're using. If you're using > webpack 2.0 as your bundler then it would affect the bundle size because :

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

will only bring Apples, Bananas and Oranges from the file as webpack 2.0 uses tree-shaking algorithm for optimisation. Also, in that case, you need to take care that you don't do any default export in your file, instead you export const because named exports would suffice that. 

import * as Fruits from 'fruits';

would just bring everything declared in fruits file.

I found this great conversation with Dan Abramov on twitter and that should help you.

https://twitter.com/dan_abramov/status/927835086577430529

EDIT

In case of lodash, you'd probably want to use babel-lodash-plugin. If you'd use that then you won't have to do 

import {isEmpty, isUndefined} from 'lodash';

and you can do 

import _ from 'lodash';

as it doesn't bring the whole library for you.

user_26482160
Related