Wildcard or asterisk (*) against es6 javascript name or custom import

Question

Just wondering which one is best used for import:

import * as Foo from './foo';

VS:

import { bar, bar2, bar3 } from './foo';

As for efficiency, let's say, for example, I use webpack to link all JavaScript files. Will the first one import everything, even if I do not use them in the main code?

Some links that I can find are as follows:

In the Airbnb Style Guide , they do not recommend any wildcards, so there will always be a default import object instead of this .

Answer 1

If you use webpack with dead code elimination provided by the new uglify or rollupjs with tree jitter, then unused imports will be deleted.

I partially agree that airbln styleguide does not use import of wildcards, although importing javascripts wildcards does not suffer from the same diseases as, for example, pythons or javas-wildcards import, namely: it does not pollute the area with variable names, defined in other modules (you can only access them using moduleB.foo , not foo when using import * as moduleB from ... ).

About the article on testing: I understand the problems a little, but I do not see anything that cannot be solved there. You can mock the import itself with some custom module loader (the amd custom module loader is literally 15 lines of code), so you don’t have to bother with the local area of ​​the module under test.

Answer 2

I agree with @Tamas.
If you need full access to the entire export in the target file, you can use import * as Foo from './foo'; or import foo from './foo':

but if you need to use a specific function or constant, you'd better avoid import * and clearly state what you need to do.

Answer 3

Regarding this part of the question:

Will the first one import everything, even if I do not use them in the main code?

Here's how it compiles with Babel 6.26:

Named

 import { bar, bar2, bar3 } from './foo'; 

... becomes ...

 'use strict'; var _foo = require('./foo'); 

---

Wildcard

 import * as Foo from './foo'; 

... becomes ...

 'use strict'; var _foo = require('./foo'); var Foo = _interopRequireWildcard(_foo); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } } 

In both cases, the entire file is imported via require .

When importing wildcards, the _interopRequireWildcard function is _interopRequireWildcard and is used to assign the entire export to a namespace variable.

It is worth noting that the compiled code will contain only one _interopRequireWildcard definition and one call to require and _interopRequireWildcard for each import.

Ultimately, using wildcard imports will require a bit more processing at runtime and will result in a slight increase in the size of the compiled js.