Webpack import * messes tree shaking?
I read this here - https://www.thedevelobear.com/post/5-things-to-improve-performance/ - that doing importing all things from a library will not allow tree shaking to remove it, even if it is not used. I don't believe this, is it really true? I would think that tree shaking would identify that none of the functions except a couple were used, and then remove those.
There is a really easy way to reduce bundle size by just checking your imports. When performing methods or components from 3rd party libraries, make sure you import only the things you need, not the whole library itself. For instance, if you’re using lodash and need the fill method, import it directly instead of calling it on lodash object:
// Instead of this
import _ from ‘lodash’
let array = [1, 2, 3];
_.fill(array, '🐻');
// Do this
import { fill } from ‘lodash’
let array = [1, 2, 3];
fill(array, '🐻');
webpack tree-shaking
asked Nov 21 '18 at 15:37
Noitidart
17.5k1361150
add a comment |
I read this here - https://www.thedevelobear.com/post/5-things-to-improve-performance/ - that doing importing all things from a library will not allow tree shaking to remove it, even if it is not used. I don't believe this, is it really true? I would think that tree shaking would identify that none of the functions except a couple were used, and then remove those.
There is a really easy way to reduce bundle size by just checking your imports. When performing methods or components from 3rd party libraries, make sure you import only the things you need, not the whole library itself. For instance, if you’re using lodash and need the fill method, import it directly instead of calling it on lodash object:
// Instead of this
import _ from ‘lodash’
let array = [1, 2, 3];
_.fill(array, '🐻');
// Do this
import { fill } from ‘lodash’
let array = [1, 2, 3];
fill(array, '🐻');
webpack tree-shaking
asked Nov 21 '18 at 15:37
Noitidart
17.5k1361150
add a comment |
I read this here - https://www.thedevelobear.com/post/5-things-to-improve-performance/ - that doing importing all things from a library will not allow tree shaking to remove it, even if it is not used. I don't believe this, is it really true? I would think that tree shaking would identify that none of the functions except a couple were used, and then remove those.
There is a really easy way to reduce bundle size by just checking your imports. When performing methods or components from 3rd party libraries, make sure you import only the things you need, not the whole library itself. For instance, if you’re using lodash and need the fill method, import it directly instead of calling it on lodash object:
// Instead of this
import _ from ‘lodash’
let array = [1, 2, 3];
_.fill(array, '🐻');
// Do this
import { fill } from ‘lodash’
let array = [1, 2, 3];
fill(array, '🐻');
webpack tree-shaking
asked Nov 21 '18 at 15:37
Noitidart
17.5k1361150
I read this here - https://www.thedevelobear.com/post/5-things-to-improve-performance/ - that doing importing all things from a library will not allow tree shaking to remove it, even if it is not used. I don't believe this, is it really true? I would think that tree shaking would identify that none of the functions except a couple were used, and then remove those.
There is a really easy way to reduce bundle size by just checking your imports. When performing methods or components from 3rd party libraries, make sure you import only the things you need, not the whole library itself. For instance, if you’re using lodash and need the fill method, import it directly instead of calling it on lodash object:
// Instead of this
import _ from ‘lodash’
let array = [1, 2, 3];
_.fill(array, '🐻');
// Do this
import { fill } from ‘lodash’
let array = [1, 2, 3];
fill(array, '🐻');
webpack tree-shaking
webpack tree-shaking
asked Nov 21 '18 at 15:37
Noitidart
17.5k1361150
asked Nov 21 '18 at 15:37
Noitidart
17.5k1361150
edited Nov 21 '18 at 17:07
asked Nov 21 '18 at 15:37
Noitidart
17.5k1361150
asked Nov 21 '18 at 15:37
Noitidart
17.5k1361150
asked Nov 21 '18 at 15:37
Noitidart
17.5k1361150
17.5k1361150
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Yes it is true. This is done via static analysis on the named imports on the es modules.
The tool is going to statically analyze your imports and just copy from the source those that you had stated. If it were to run throughout all your code, identify all the functions that you called from that file, go back, remove those that aren't used, it would be costly and would take much more time.
if you have:
import {a} from 'filea'
but you have
export const a = 'a';
export const b = 'b';
The bundler/tool can go to your file, see:
"oh, one imported just
afromfilea, let me pull just it."
https://webpack.js.org/guides/tree-shaking/
https://medium.com/webpack/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77
https://medium.com/@zwegrzyniak/webpack-4-1-and-es-modules-esm-dd0bd7dca4da
answered Nov 21 '18 at 16:45
PlayMa256
3,28311133
Oh wow thank you very much!!! Do you have any sources/references that elaborate more on this?
– Noitidart
Nov 21 '18 at 16:46
1
added! Most of them are webpack related, but still
– PlayMa256
Nov 21 '18 at 16:49
Thank you once again very much brother!
– Noitidart
Nov 21 '18 at 16:55
add a 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%2f53415558%2fwebpack-import-messes-tree-shaking%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
Yes it is true. This is done via static analysis on the named imports on the es modules.
The tool is going to statically analyze your imports and just copy from the source those that you had stated. If it were to run throughout all your code, identify all the functions that you called from that file, go back, remove those that aren't used, it would be costly and would take much more time.
if you have:
import {a} from 'filea'
but you have
export const a = 'a';
export const b = 'b';
The bundler/tool can go to your file, see:
"oh, one imported just
afromfilea, let me pull just it."
https://webpack.js.org/guides/tree-shaking/
https://medium.com/webpack/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77
https://medium.com/@zwegrzyniak/webpack-4-1-and-es-modules-esm-dd0bd7dca4da
answered Nov 21 '18 at 16:45
PlayMa256
3,28311133
Oh wow thank you very much!!! Do you have any sources/references that elaborate more on this?
– Noitidart
Nov 21 '18 at 16:46
1
added! Most of them are webpack related, but still
– PlayMa256
Nov 21 '18 at 16:49
Thank you once again very much brother!
– Noitidart
Nov 21 '18 at 16:55
add a comment |
Yes it is true. This is done via static analysis on the named imports on the es modules.
The tool is going to statically analyze your imports and just copy from the source those that you had stated. If it were to run throughout all your code, identify all the functions that you called from that file, go back, remove those that aren't used, it would be costly and would take much more time.
if you have:
import {a} from 'filea'
but you have
export const a = 'a';
export const b = 'b';
The bundler/tool can go to your file, see:
"oh, one imported just
afromfilea, let me pull just it."
https://webpack.js.org/guides/tree-shaking/
https://medium.com/webpack/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77
https://medium.com/@zwegrzyniak/webpack-4-1-and-es-modules-esm-dd0bd7dca4da
answered Nov 21 '18 at 16:45
PlayMa256
3,28311133
Oh wow thank you very much!!! Do you have any sources/references that elaborate more on this?
– Noitidart
Nov 21 '18 at 16:46
1
added! Most of them are webpack related, but still
– PlayMa256
Nov 21 '18 at 16:49
Thank you once again very much brother!
– Noitidart
Nov 21 '18 at 16:55
add a comment |
Yes it is true. This is done via static analysis on the named imports on the es modules.
The tool is going to statically analyze your imports and just copy from the source those that you had stated. If it were to run throughout all your code, identify all the functions that you called from that file, go back, remove those that aren't used, it would be costly and would take much more time.
if you have:
import {a} from 'filea'
but you have
export const a = 'a';
export const b = 'b';
The bundler/tool can go to your file, see:
"oh, one imported just
afromfilea, let me pull just it."
https://webpack.js.org/guides/tree-shaking/
https://medium.com/webpack/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77
https://medium.com/@zwegrzyniak/webpack-4-1-and-es-modules-esm-dd0bd7dca4da
answered Nov 21 '18 at 16:45
PlayMa256
3,28311133
Yes it is true. This is done via static analysis on the named imports on the es modules.
The tool is going to statically analyze your imports and just copy from the source those that you had stated. If it were to run throughout all your code, identify all the functions that you called from that file, go back, remove those that aren't used, it would be costly and would take much more time.
if you have:
import {a} from 'filea'
but you have
export const a = 'a';
export const b = 'b';
The bundler/tool can go to your file, see:
"oh, one imported just
afromfilea, let me pull just it."
https://webpack.js.org/guides/tree-shaking/
https://medium.com/webpack/better-tree-shaking-with-deep-scope-analysis-a0b788c0ce77
https://medium.com/@zwegrzyniak/webpack-4-1-and-es-modules-esm-dd0bd7dca4da
answered Nov 21 '18 at 16:45
PlayMa256
3,28311133
edited Nov 21 '18 at 16:49
answered Nov 21 '18 at 16:45
PlayMa256
3,28311133
answered Nov 21 '18 at 16:45
PlayMa256
3,28311133
answered Nov 21 '18 at 16:45
PlayMa256
3,28311133
3,28311133
Oh wow thank you very much!!! Do you have any sources/references that elaborate more on this?
– Noitidart
Nov 21 '18 at 16:46
1
added! Most of them are webpack related, but still
– PlayMa256
Nov 21 '18 at 16:49
Thank you once again very much brother!
– Noitidart
Nov 21 '18 at 16:55
add a comment |
Oh wow thank you very much!!! Do you have any sources/references that elaborate more on this?
– Noitidart
Nov 21 '18 at 16:46
1
added! Most of them are webpack related, but still
– PlayMa256
Nov 21 '18 at 16:49
Thank you once again very much brother!
– Noitidart
Nov 21 '18 at 16:55
Oh wow thank you very much!!! Do you have any sources/references that elaborate more on this?
– Noitidart
Nov 21 '18 at 16:46
Oh wow thank you very much!!! Do you have any sources/references that elaborate more on this?
– Noitidart
Nov 21 '18 at 16:46
1
1
added! Most of them are webpack related, but still
– PlayMa256
Nov 21 '18 at 16:49
added! Most of them are webpack related, but still
– PlayMa256
Nov 21 '18 at 16:49
Thank you once again very much brother!
– Noitidart
Nov 21 '18 at 16:55
Thank you once again very much brother!
– Noitidart
Nov 21 '18 at 16:55
add a 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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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%2f53415558%2fwebpack-import-messes-tree-shaking%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
