Difference between “import { pick } from 'lodash';” and “import pick from 'lodash/pick';”
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?
javascript webpack ecmascript-6 import lodash
edited Nov 15 '18 at 13:59
T.J. Crowder
693k12212341328
asked Nov 15 '18 at 13:55
PatrickkxPatrickkx
3331724
add a comment |
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?
javascript webpack ecmascript-6 import lodash
edited Nov 15 '18 at 13:59
T.J. Crowder
693k12212341328
asked Nov 15 '18 at 13:55
PatrickkxPatrickkx
3331724
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: stackoverflow.com/questions/36795819/…
– 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
add a comment |
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?
javascript webpack ecmascript-6 import lodash
edited Nov 15 '18 at 13:59
T.J. Crowder
693k12212341328
asked Nov 15 '18 at 13:55
PatrickkxPatrickkx
3331724
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?
javascript webpack ecmascript-6 import lodash
javascript webpack ecmascript-6 import lodash
edited Nov 15 '18 at 13:59
T.J. Crowder
693k12212341328
asked Nov 15 '18 at 13:55
PatrickkxPatrickkx
3331724
edited Nov 15 '18 at 13:59
T.J. Crowder
693k12212341328
asked Nov 15 '18 at 13:55
PatrickkxPatrickkx
3331724
edited Nov 15 '18 at 13:59
T.J. Crowder
693k12212341328
edited Nov 15 '18 at 13:59
T.J. Crowder
693k12212341328
edited Nov 15 '18 at 13:59
T.J. Crowder
693k12212341328
693k12212341328
asked Nov 15 '18 at 13:55
PatrickkxPatrickkx
3331724
asked Nov 15 '18 at 13:55
PatrickkxPatrickkx
3331724
asked Nov 15 '18 at 13:55
PatrickkxPatrickkx
3331724
3331724
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: stackoverflow.com/questions/36795819/…
– 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
add a comment |
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: stackoverflow.com/questions/36795819/…
– 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
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
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
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: stackoverflow.com/questions/36795819/…
– T.J. Crowder
Nov 15 '18 at 14:03
Kinda forgot the link on my comment above: stackoverflow.com/questions/36795819/…
– T.J. Crowder
Nov 15 '18 at 14:03
1
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
@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
add a comment |
1 Answer
1
active
oldest
votes
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 fulllodashmodule and then only imports the one function from it.
import pick from 'lodash/pick';loads only thelodash/pickmodule 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?
The import the same thing to 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.
answered Nov 15 '18 at 14:03
T.J. CrowderT.J. Crowder
693k12212341328
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
2
import {pick} from 'loadash'will remain valid even if loadash decides to movepicktotools/pickasloadshkeeps 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
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
|
show 1 more comment
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321049%2fdifference-between-import-pick-from-lodash-and-import-pick-from-lodas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 fulllodashmodule and then only imports the one function from it.
import pick from 'lodash/pick';loads only thelodash/pickmodule 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?
The import the same thing to 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.
answered Nov 15 '18 at 14:03
T.J. CrowderT.J. Crowder
693k12212341328
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
2
import {pick} from 'loadash'will remain valid even if loadash decides to movepicktotools/pickasloadshkeeps 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
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
|
show 1 more comment
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 fulllodashmodule and then only imports the one function from it.
import pick from 'lodash/pick';loads only thelodash/pickmodule 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?
The import the same thing to 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.
answered Nov 15 '18 at 14:03
T.J. CrowderT.J. Crowder
693k12212341328
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
2
import {pick} from 'loadash'will remain valid even if loadash decides to movepicktotools/pickasloadshkeeps 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
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
|
show 1 more comment
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 fulllodashmodule and then only imports the one function from it.
import pick from 'lodash/pick';loads only thelodash/pickmodule 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?
The import the same thing to 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.
answered Nov 15 '18 at 14:03
T.J. CrowderT.J. Crowder
693k12212341328
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 fulllodashmodule and then only imports the one function from it.
import pick from 'lodash/pick';loads only thelodash/pickmodule 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?
The import the same thing to 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.
answered Nov 15 '18 at 14:03
T.J. CrowderT.J. Crowder
693k12212341328
answered Nov 15 '18 at 14:03
T.J. CrowderT.J. Crowder
693k12212341328
answered Nov 15 '18 at 14:03
T.J. CrowderT.J. Crowder
693k12212341328
answered Nov 15 '18 at 14:03
T.J. CrowderT.J. Crowder
693k12212341328
693k12212341328
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
2
import {pick} from 'loadash'will remain valid even if loadash decides to movepicktotools/pickasloadshkeeps 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
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
|
show 1 more comment
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
2
import {pick} from 'loadash'will remain valid even if loadash decides to movepicktotools/pickasloadshkeeps 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
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
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
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
2
2
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
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
@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
@sabithpocker - That's an interesting point. Any real danger of that?
– T.J. Crowder
Nov 15 '18 at 14:16
1
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
@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
|
show 1 more comment
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53321049%2fdifference-between-import-pick-from-lodash-and-import-pick-from-lodas%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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: stackoverflow.com/questions/36795819/…
– 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