-1

What's the point of doing this

import * as copy from 'copy-to-clipboard';

versus

import { someMethod } from 'copy-to-clipboard';

Does it affect performance or bundle size? I prefer the 2nd one, it looks cleaner.

Judy Allen
  • 83
  • 1
  • 7
  • They've got different meanings, one is importing an entire module's contents while the other is importing a single object or value. So does it affect performance? Surely, if the module is enormous. – Alexandre Elshobokshy Sep 08 '21 at 09:19
  • There is a pretty good explanation available here: https://stackoverflow.com/questions/42051588/wildcard-or-asterisk-vs-named-or-selective-import-es6-javascript – tho-masn Sep 08 '21 at 09:20

1 Answers1

2

Using the second form allows bundlers like Webpack to optimize your bundle size using a process known as 'tree shaking'.

Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. The name and concept have been popularized by the ES2015 module bundler rollup.

Taken from https://webpack.js.org/guides/tree-shaking/

Let's say you have a library module like this:

// my-module.js

export const foo = function () { ... };
export const bar = function () { ... };
export const baz = function () { ... };

Then, if you use foo() in file.js as follows, Webpack will recognize that you do not need bar() and baz() and not emit them in the bundle, reducing the number of bytes sent over the network which in turn can speed up loading of your website.

import { foo } from 'my-module';

foo();
Abhyudaya Sharma
  • 1,173
  • 12
  • 18