Load chunks/bundles as needed (like SystemJS)
Using Webpack, I have multiple chunks/bundles being created so that the entire app is not loaded at once. I've hand-chosen which dependencies I want to be moved into their own chunks. Here is the important part of my config:
module.exports = {
devtool: 'inline-source-map',
mode: process.env.NODE_ENV,
entry: {
main: './src/index.tsx',
},
optimization: {
runtimeChunk: {
name: 'runtime',
},
splitChunks: {
cacheGroups: {
...makeChunkCacheGroup('chunk_1', //node_modules/(... list of deps ...)(/|$)/),
...makeChunkCacheGroup('chunk_2', //node_modules/(... list of deps ...)(/|$)/),
},
},
},
// ...
};
function makeChunkCacheGroup(name, ...moduleNameRegexps) {
return {
[name]: {
name,
test: module => moduleNameRegexps.some(pattern => pattern.test(module.context)),
chunks: 'all',
minChunks: 1,
minSize: 0,
maxSize: Infinity,
reuseExistingChunk: true,
enforce: true,
},
};
}
This config gives me runtime, main, chunk_, and chunk_2. However, all of these chunks are injected into index.html, thus they all load during the initial page load instead of dynamically (as I naively expected).
I've used SystemJS in the past to bundle things up into multiple bundles and it would only download a given bundle as it was required by the app. I now realize that Webpack does not work this way.
Is there a way to make Webpack only download the runtime and main bundles initially, and then download the other bundles as they're needed?
Note 1: I realize that I can use dynamic imports e.g. import('some-dep').then(...), but it's not reasonable to do so based on the size of the codebase, and also, I think this sort of thing is better left to configuration (a module shouldn't have to pick and choose which deps it should load dynamically).
Note 2: I did try to specify multiple entry points but never got it working. The app really only has a single entry point. But, for instance, we have multiple directories under src/app/elements/, and it'd be perfect if each of those directories ended up in its own bundle which was then dynamically loaded. I couldn't get this working in an automated/smart way.
javascript webpack bundling-and-minification
asked Nov 21 '18 at 15:18
Josh M.Josh M.
15.6k2083126
add a comment |
Using Webpack, I have multiple chunks/bundles being created so that the entire app is not loaded at once. I've hand-chosen which dependencies I want to be moved into their own chunks. Here is the important part of my config:
module.exports = {
devtool: 'inline-source-map',
mode: process.env.NODE_ENV,
entry: {
main: './src/index.tsx',
},
optimization: {
runtimeChunk: {
name: 'runtime',
},
splitChunks: {
cacheGroups: {
...makeChunkCacheGroup('chunk_1', //node_modules/(... list of deps ...)(/|$)/),
...makeChunkCacheGroup('chunk_2', //node_modules/(... list of deps ...)(/|$)/),
},
},
},
// ...
};
function makeChunkCacheGroup(name, ...moduleNameRegexps) {
return {
[name]: {
name,
test: module => moduleNameRegexps.some(pattern => pattern.test(module.context)),
chunks: 'all',
minChunks: 1,
minSize: 0,
maxSize: Infinity,
reuseExistingChunk: true,
enforce: true,
},
};
}
This config gives me runtime, main, chunk_, and chunk_2. However, all of these chunks are injected into index.html, thus they all load during the initial page load instead of dynamically (as I naively expected).
I've used SystemJS in the past to bundle things up into multiple bundles and it would only download a given bundle as it was required by the app. I now realize that Webpack does not work this way.
Is there a way to make Webpack only download the runtime and main bundles initially, and then download the other bundles as they're needed?
Note 1: I realize that I can use dynamic imports e.g. import('some-dep').then(...), but it's not reasonable to do so based on the size of the codebase, and also, I think this sort of thing is better left to configuration (a module shouldn't have to pick and choose which deps it should load dynamically).
Note 2: I did try to specify multiple entry points but never got it working. The app really only has a single entry point. But, for instance, we have multiple directories under src/app/elements/, and it'd be perfect if each of those directories ended up in its own bundle which was then dynamically loaded. I couldn't get this working in an automated/smart way.
javascript webpack bundling-and-minification
asked Nov 21 '18 at 15:18
Josh M.Josh M.
15.6k2083126
On note1, isn't it reasonable to expect the application knows the best for when to load a module? e.g. you can naturally write sth likedoSth() { const dep = await import('dep'); dep.runSth() };
– William Chong
Nov 21 '18 at 15:42
In my opinion, it doesn't belong in "code". Especially the way I'd have to do it with Webpack, that is, using "magic comments" e.g.import (/** webpackChunkName: chunk_1 */ /** webpackMode: lazt **/ 'my-dep');This is very hacky and brittle. Configuration does not belong in code, it belongs in config. /rant
– Josh M.
Nov 21 '18 at 16:04
add a comment |
Using Webpack, I have multiple chunks/bundles being created so that the entire app is not loaded at once. I've hand-chosen which dependencies I want to be moved into their own chunks. Here is the important part of my config:
module.exports = {
devtool: 'inline-source-map',
mode: process.env.NODE_ENV,
entry: {
main: './src/index.tsx',
},
optimization: {
runtimeChunk: {
name: 'runtime',
},
splitChunks: {
cacheGroups: {
...makeChunkCacheGroup('chunk_1', //node_modules/(... list of deps ...)(/|$)/),
...makeChunkCacheGroup('chunk_2', //node_modules/(... list of deps ...)(/|$)/),
},
},
},
// ...
};
function makeChunkCacheGroup(name, ...moduleNameRegexps) {
return {
[name]: {
name,
test: module => moduleNameRegexps.some(pattern => pattern.test(module.context)),
chunks: 'all',
minChunks: 1,
minSize: 0,
maxSize: Infinity,
reuseExistingChunk: true,
enforce: true,
},
};
}
This config gives me runtime, main, chunk_, and chunk_2. However, all of these chunks are injected into index.html, thus they all load during the initial page load instead of dynamically (as I naively expected).
I've used SystemJS in the past to bundle things up into multiple bundles and it would only download a given bundle as it was required by the app. I now realize that Webpack does not work this way.
Is there a way to make Webpack only download the runtime and main bundles initially, and then download the other bundles as they're needed?
Note 1: I realize that I can use dynamic imports e.g. import('some-dep').then(...), but it's not reasonable to do so based on the size of the codebase, and also, I think this sort of thing is better left to configuration (a module shouldn't have to pick and choose which deps it should load dynamically).
Note 2: I did try to specify multiple entry points but never got it working. The app really only has a single entry point. But, for instance, we have multiple directories under src/app/elements/, and it'd be perfect if each of those directories ended up in its own bundle which was then dynamically loaded. I couldn't get this working in an automated/smart way.
javascript webpack bundling-and-minification
asked Nov 21 '18 at 15:18
Josh M.Josh M.
15.6k2083126
Using Webpack, I have multiple chunks/bundles being created so that the entire app is not loaded at once. I've hand-chosen which dependencies I want to be moved into their own chunks. Here is the important part of my config:
module.exports = {
devtool: 'inline-source-map',
mode: process.env.NODE_ENV,
entry: {
main: './src/index.tsx',
},
optimization: {
runtimeChunk: {
name: 'runtime',
},
splitChunks: {
cacheGroups: {
...makeChunkCacheGroup('chunk_1', //node_modules/(... list of deps ...)(/|$)/),
...makeChunkCacheGroup('chunk_2', //node_modules/(... list of deps ...)(/|$)/),
},
},
},
// ...
};
function makeChunkCacheGroup(name, ...moduleNameRegexps) {
return {
[name]: {
name,
test: module => moduleNameRegexps.some(pattern => pattern.test(module.context)),
chunks: 'all',
minChunks: 1,
minSize: 0,
maxSize: Infinity,
reuseExistingChunk: true,
enforce: true,
},
};
}
This config gives me runtime, main, chunk_, and chunk_2. However, all of these chunks are injected into index.html, thus they all load during the initial page load instead of dynamically (as I naively expected).
I've used SystemJS in the past to bundle things up into multiple bundles and it would only download a given bundle as it was required by the app. I now realize that Webpack does not work this way.
Is there a way to make Webpack only download the runtime and main bundles initially, and then download the other bundles as they're needed?
Note 1: I realize that I can use dynamic imports e.g. import('some-dep').then(...), but it's not reasonable to do so based on the size of the codebase, and also, I think this sort of thing is better left to configuration (a module shouldn't have to pick and choose which deps it should load dynamically).
Note 2: I did try to specify multiple entry points but never got it working. The app really only has a single entry point. But, for instance, we have multiple directories under src/app/elements/, and it'd be perfect if each of those directories ended up in its own bundle which was then dynamically loaded. I couldn't get this working in an automated/smart way.
javascript webpack bundling-and-minification
javascript webpack bundling-and-minification
asked Nov 21 '18 at 15:18
Josh M.Josh M.
15.6k2083126
asked Nov 21 '18 at 15:18
Josh M.Josh M.
15.6k2083126
asked Nov 21 '18 at 15:18
Josh M.Josh M.
15.6k2083126
asked Nov 21 '18 at 15:18
Josh M.Josh M.
15.6k2083126
asked Nov 21 '18 at 15:18
Josh M.Josh M.
15.6k2083126
15.6k2083126
On note1, isn't it reasonable to expect the application knows the best for when to load a module? e.g. you can naturally write sth likedoSth() { const dep = await import('dep'); dep.runSth() };
– William Chong
Nov 21 '18 at 15:42
In my opinion, it doesn't belong in "code". Especially the way I'd have to do it with Webpack, that is, using "magic comments" e.g.import (/** webpackChunkName: chunk_1 */ /** webpackMode: lazt **/ 'my-dep');This is very hacky and brittle. Configuration does not belong in code, it belongs in config. /rant
– Josh M.
Nov 21 '18 at 16:04
add a comment |
On note1, isn't it reasonable to expect the application knows the best for when to load a module? e.g. you can naturally write sth likedoSth() { const dep = await import('dep'); dep.runSth() };
– William Chong
Nov 21 '18 at 15:42
In my opinion, it doesn't belong in "code". Especially the way I'd have to do it with Webpack, that is, using "magic comments" e.g.import (/** webpackChunkName: chunk_1 */ /** webpackMode: lazt **/ 'my-dep');This is very hacky and brittle. Configuration does not belong in code, it belongs in config. /rant
– Josh M.
Nov 21 '18 at 16:04
On note1, isn't it reasonable to expect the application knows the best for when to load a module? e.g. you can naturally write sth like
doSth() { const dep = await import('dep'); dep.runSth() };– William Chong
Nov 21 '18 at 15:42
On note1, isn't it reasonable to expect the application knows the best for when to load a module? e.g. you can naturally write sth like
doSth() { const dep = await import('dep'); dep.runSth() };– William Chong
Nov 21 '18 at 15:42
In my opinion, it doesn't belong in "code". Especially the way I'd have to do it with Webpack, that is, using "magic comments" e.g.
import (/** webpackChunkName: chunk_1 */ /** webpackMode: lazt **/ 'my-dep'); This is very hacky and brittle. Configuration does not belong in code, it belongs in config. /rant– Josh M.
Nov 21 '18 at 16:04
In my opinion, it doesn't belong in "code". Especially the way I'd have to do it with Webpack, that is, using "magic comments" e.g.
import (/** webpackChunkName: chunk_1 */ /** webpackMode: lazt **/ 'my-dep'); This is very hacky and brittle. Configuration does not belong in code, it belongs in config. /rant– Josh M.
Nov 21 '18 at 16:04
add a comment |
0
active
oldest
votes
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%2f53415193%2fload-chunks-bundles-as-needed-like-systemjs%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53415193%2fload-chunks-bundles-as-needed-like-systemjs%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
On note1, isn't it reasonable to expect the application knows the best for when to load a module? e.g. you can naturally write sth like
doSth() { const dep = await import('dep'); dep.runSth() };– William Chong
Nov 21 '18 at 15:42
In my opinion, it doesn't belong in "code". Especially the way I'd have to do it with Webpack, that is, using "magic comments" e.g.
import (/** webpackChunkName: chunk_1 */ /** webpackMode: lazt **/ 'my-dep');This is very hacky and brittle. Configuration does not belong in code, it belongs in config. /rant– Josh M.
Nov 21 '18 at 16:04