5

What's the difference between

import { pick } from 'lodash';

and

import pick from 'lodash/pick';

(Note that it's 'lodash/pick' in the second one, not just 'lodash'.)

How does do they each affect the bundle size?

Do they import exactly the same parts of lodash?

Are they comparatively fast?

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
Patrickkx
  • 1,740
  • 7
  • 31
  • 60
  • **PLEASE NOTE**: *"When should I use curly braces for ES6 import?"* is certainly related, but note that the module specifiers in the OP's question above are `'lodash'` and `'lodash/pick'`. E.g., importing from different places. – T.J. Crowder Nov 15 '18 at 13:58
  • the second one only imports that function the other one imports the lib and extracts pick – Joe Warner Nov 15 '18 at 13:58
  • Kinda forgot the link on my comment above: https://stackoverflow.com/questions/36795819/when-should-i-use-curly-braces-for-es6-import – T.J. Crowder Nov 15 '18 at 14:03
  • 1
    @Patrickkx - I took the liberty of editing out the bit where you asked which was "better" to use, since it calls for opinion, which is off-topic for SO. The question as a whole clearly wasn't just looking for opinion, so it seemed best just to remove that bit. Obviously, correct it if that's contrary to your intent. – T.J. Crowder Nov 15 '18 at 14:06

1 Answers1

14

The lodash module is a roll-up module that imports and reexports from its various individual modules like lodash/pick.

So:

  • import { pick } from 'lodash'; loads the full lodash module and then only imports the one function from it.
  • import pick from 'lodash/pick'; loads only the lodash/pick module and gets its default export (pick).

How does do they each affect the bundle size?

That depends on the degree to which your bundler can do tree-shaking. If pick is the only part of lodash you use, and your bundler can figure that out, it should be about the same. But bundlers vary in terms of the degree and quality of tree-shaking they do.

Do they import exactly the same parts of lodash?

They import the same thing into your module, but in very different ways (see above).

Are they comparatively fast?

In terms of runtime performance, they should be roughly similar, certainly nothing to worry about.

In terms of bundling time, the more work your bundler has to do, the longer it will take; that includes figuring out that although you're importing lodash, you only use pick.

If you really only need pick, the second form should make for less work for the bundler.

But in terms of size, etc., you should probably experiment with your specific setup and your overall code to figure out which is better for you.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
  • lol just about to post an answer but yours is more well rounded and covers the same points. but from my pov, I believe'd the second one would be faster depending on if you're bundler has realized you're only importing pick or if he has realized it doesn't need all of the module. but my domain knowleage on this isn't best so you're more likely correct on this one. – Joe Warner Nov 15 '18 at 14:06
  • 3
    `import {pick} from 'loadash'` will remain valid even if loadash decides to move `pick` to `tools/pick` as `loadsh` keeps the aliases and paths can be updated. – sabithpocker Nov 15 '18 at 14:09
  • @JoeWarner Same here! I even posted it, that too with same formatting. I have got to delete my post it seems. – Anand Undavia Nov 15 '18 at 14:11
  • @sabithpocker - That's an interesting point. Any real danger of that? – T.J. Crowder Nov 15 '18 at 14:16
  • No real danger other than re hashing the import paths if an upgrade like this happen. Shouldn't happen for libraries that are already stable. – sabithpocker Nov 15 '18 at 14:24
  • 1
    @JoeWarner yeah! With TJ with us on SO, answering on JS tag feels like competitive coding lol. – Anand Undavia Nov 15 '18 at 15:07