Why is Webpack generating 2 chunks per dynamic import()?
I've started using some dynamic import() statements like so
import(/* webpackChunkName: "chart" */'./Chart')
the problem is that Webpack generates 2 new chunks for this: chart.js (which is almost empty) and vendors~chart.js (which actually has everything that I expected to be in one new chunk).
My config has nothing fancy in it. I have only one named entry called client and that was my only bundle before using the dynamic require.
This happens for both development and production mode.
I'm using Webpack ver. 4.8.1
Any ideas how to achieve just one new chunk? I don't want the client to make 2 requests instead of one.
webpack code-splitting code-splitting-async
asked May 10 '18 at 14:23
Matt LeonowiczMatt Leonowicz
457511
add a comment |
I've started using some dynamic import() statements like so
import(/* webpackChunkName: "chart" */'./Chart')
the problem is that Webpack generates 2 new chunks for this: chart.js (which is almost empty) and vendors~chart.js (which actually has everything that I expected to be in one new chunk).
My config has nothing fancy in it. I have only one named entry called client and that was my only bundle before using the dynamic require.
This happens for both development and production mode.
I'm using Webpack ver. 4.8.1
Any ideas how to achieve just one new chunk? I don't want the client to make 2 requests instead of one.
webpack code-splitting code-splitting-async
asked May 10 '18 at 14:23
Matt LeonowiczMatt Leonowicz
457511
"which is almost empty", what is inside of that?
– PlayMa256
May 10 '18 at 18:00
That might have been misleading. What I meant was that there's a source code of my component in it, which is very lightweight (2KB gziped) compared to external library dependency (which webpack put in `vendors-chart.js and is about 90 KB gzipped)
– Matt Leonowicz
May 11 '18 at 11:14
add a comment |
I've started using some dynamic import() statements like so
import(/* webpackChunkName: "chart" */'./Chart')
the problem is that Webpack generates 2 new chunks for this: chart.js (which is almost empty) and vendors~chart.js (which actually has everything that I expected to be in one new chunk).
My config has nothing fancy in it. I have only one named entry called client and that was my only bundle before using the dynamic require.
This happens for both development and production mode.
I'm using Webpack ver. 4.8.1
Any ideas how to achieve just one new chunk? I don't want the client to make 2 requests instead of one.
webpack code-splitting code-splitting-async
asked May 10 '18 at 14:23
Matt LeonowiczMatt Leonowicz
457511
I've started using some dynamic import() statements like so
import(/* webpackChunkName: "chart" */'./Chart')
the problem is that Webpack generates 2 new chunks for this: chart.js (which is almost empty) and vendors~chart.js (which actually has everything that I expected to be in one new chunk).
My config has nothing fancy in it. I have only one named entry called client and that was my only bundle before using the dynamic require.
This happens for both development and production mode.
I'm using Webpack ver. 4.8.1
Any ideas how to achieve just one new chunk? I don't want the client to make 2 requests instead of one.
webpack code-splitting code-splitting-async
webpack code-splitting code-splitting-async
asked May 10 '18 at 14:23
Matt LeonowiczMatt Leonowicz
457511
asked May 10 '18 at 14:23
Matt LeonowiczMatt Leonowicz
457511
asked May 10 '18 at 14:23
Matt LeonowiczMatt Leonowicz
457511
asked May 10 '18 at 14:23
Matt LeonowiczMatt Leonowicz
457511
asked May 10 '18 at 14:23
Matt LeonowiczMatt Leonowicz
457511
457511
"which is almost empty", what is inside of that?
– PlayMa256
May 10 '18 at 18:00
That might have been misleading. What I meant was that there's a source code of my component in it, which is very lightweight (2KB gziped) compared to external library dependency (which webpack put in `vendors-chart.js and is about 90 KB gzipped)
– Matt Leonowicz
May 11 '18 at 11:14
add a comment |
"which is almost empty", what is inside of that?
– PlayMa256
May 10 '18 at 18:00
That might have been misleading. What I meant was that there's a source code of my component in it, which is very lightweight (2KB gziped) compared to external library dependency (which webpack put in `vendors-chart.js and is about 90 KB gzipped)
– Matt Leonowicz
May 11 '18 at 11:14
"which is almost empty", what is inside of that?
– PlayMa256
May 10 '18 at 18:00
"which is almost empty", what is inside of that?
– PlayMa256
May 10 '18 at 18:00
That might have been misleading. What I meant was that there's a source code of my component in it, which is very lightweight (2KB gziped) compared to external library dependency (which webpack put in `vendors-chart.js and is about 90 KB gzipped)
– Matt Leonowicz
May 11 '18 at 11:14
That might have been misleading. What I meant was that there's a source code of my component in it, which is very lightweight (2KB gziped) compared to external library dependency (which webpack put in `vendors-chart.js and is about 90 KB gzipped)
– Matt Leonowicz
May 11 '18 at 11:14
add a comment |
1 Answer
1
active
oldest
votes
I found two (imperfect) ways to avoid that.
If your app have a single entry, you can remove the
vendorscache group altogether since this vendor group is designed for multi-entry apps.
optimization: {
splitChunks: {
cacheGroups: {
vendors: false, // not needed for a single entry app
},
},
},
you can use
webpack.optimize.MinChunkSizePluginthat will bundle you small chunk to another one, albeit not necessarily with the best optimized option.
edited Jan 3 at 19:37
tuomassalo
5,54443142
answered Jun 12 '18 at 8:05
Nicolas ChNicolas Ch
214
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%2f50275183%2fwhy-is-webpack-generating-2-chunks-per-dynamic-import%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
I found two (imperfect) ways to avoid that.
If your app have a single entry, you can remove the
vendorscache group altogether since this vendor group is designed for multi-entry apps.
optimization: {
splitChunks: {
cacheGroups: {
vendors: false, // not needed for a single entry app
},
},
},
you can use
webpack.optimize.MinChunkSizePluginthat will bundle you small chunk to another one, albeit not necessarily with the best optimized option.
edited Jan 3 at 19:37
tuomassalo
5,54443142
answered Jun 12 '18 at 8:05
Nicolas ChNicolas Ch
214
add a comment |
I found two (imperfect) ways to avoid that.
If your app have a single entry, you can remove the
vendorscache group altogether since this vendor group is designed for multi-entry apps.
optimization: {
splitChunks: {
cacheGroups: {
vendors: false, // not needed for a single entry app
},
},
},
you can use
webpack.optimize.MinChunkSizePluginthat will bundle you small chunk to another one, albeit not necessarily with the best optimized option.
edited Jan 3 at 19:37
tuomassalo
5,54443142
answered Jun 12 '18 at 8:05
Nicolas ChNicolas Ch
214
add a comment |
I found two (imperfect) ways to avoid that.
If your app have a single entry, you can remove the
vendorscache group altogether since this vendor group is designed for multi-entry apps.
optimization: {
splitChunks: {
cacheGroups: {
vendors: false, // not needed for a single entry app
},
},
},
you can use
webpack.optimize.MinChunkSizePluginthat will bundle you small chunk to another one, albeit not necessarily with the best optimized option.
edited Jan 3 at 19:37
tuomassalo
5,54443142
answered Jun 12 '18 at 8:05
Nicolas ChNicolas Ch
214
I found two (imperfect) ways to avoid that.
If your app have a single entry, you can remove the
vendorscache group altogether since this vendor group is designed for multi-entry apps.
optimization: {
splitChunks: {
cacheGroups: {
vendors: false, // not needed for a single entry app
},
},
},
you can use
webpack.optimize.MinChunkSizePluginthat will bundle you small chunk to another one, albeit not necessarily with the best optimized option.
edited Jan 3 at 19:37
tuomassalo
5,54443142
answered Jun 12 '18 at 8:05
Nicolas ChNicolas Ch
214
edited Jan 3 at 19:37
tuomassalo
5,54443142
edited Jan 3 at 19:37
tuomassalo
5,54443142
edited Jan 3 at 19:37
tuomassalo
5,54443142
5,54443142
answered Jun 12 '18 at 8:05
Nicolas ChNicolas Ch
214
answered Jun 12 '18 at 8:05
Nicolas ChNicolas Ch
214
answered Jun 12 '18 at 8:05
Nicolas ChNicolas Ch
214
214
add a comment |
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.
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%2f50275183%2fwhy-is-webpack-generating-2-chunks-per-dynamic-import%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
"which is almost empty", what is inside of that?
– PlayMa256
May 10 '18 at 18:00
That might have been misleading. What I meant was that there's a source code of my component in it, which is very lightweight (2KB gziped) compared to external library dependency (which webpack put in `vendors-chart.js and is about 90 KB gzipped)
– Matt Leonowicz
May 11 '18 at 11:14