Wildcard or asterisk (*) vs named or selective import es6 javascript

javascript import ecmascript-6 wildcard es6-modules
andiwin picture andiwin · Feb 5, 2017 · Viewed 33.1k times · Source

Just wondering which one is the best way to use import:

import * as Foo from './foo';

VS:

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

In terms of efficiency, say for example, I'm using webpack for bundling all the JavaScript files. Will the first one actually importing everything even though I'm not using them in the main code?

Some references that I can find are:

In Airbnb style guide, they are recommending no wildcard so there will always be default import object, and this.

Answer

Tamas Hegedus picture Tamas Hegedus · Feb 5, 2017

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

I partially agree with the airbnb styleguide to not to use wildcard imports, although javascripts wildcard imports do not suffer from the same diseases as for example pythons or javas wildcard imports, namely it does not pollute the scope with variable names defined in other modules (you can only access them by moduleB.foo, not foo when using import * as moduleB from ...).

About the article on testing: I kindof understand the concerns, but I see nothing that cannot be solved there. You can mock the imports themselves with some custom module loader (a custom amd module loader is literally 15 lines of code), so you dont have to mess with the local scope of the tested module.

Related questions

When should I use curly braces for ES6 import?

It seems to be obvious, but I found myself a bit confused about when to use curly braces for importing a single module in ES6. For example, in the React-Native project I am working on, I have the following file …

Read More
Can you use es6 import alias syntax for React Components?

I'm trying to do something like the following, however it returns null: import { Button as styledButton } from 'component-library' then attempting to render it as: import React, { PropTypes } from "react"; import cx from 'classNames'; import { Button as styledButton } from 'component-library'; export …

Read More
webpack: import + module.exports in the same module caused error

I'm developing a website with webpack. When I have a code like this: import $ from 'jquery'; function foo() {}; module.exports = foo; I got the error Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>…

Read More