Load chunks/bundles as needed (like SystemJS)
up vote
0
down vote
favorite
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 at 15:18
Josh M.
15.4k1882125
add a comment |
up vote
0
down vote
favorite
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 at 15:18
Josh M.
15.4k1882125
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 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 at 16:04
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
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 at 15:18
Josh M.
15.4k1882125
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 at 15:18
Josh M.
15.4k1882125
asked Nov 21 at 15:18
Josh M.
15.4k1882125
asked Nov 21 at 15:18
Josh M.
15.4k1882125
asked Nov 21 at 15:18
Josh M.
15.4k1882125
asked Nov 21 at 15:18
Josh M.
15.4k1882125
15.4k1882125
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 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 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 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 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 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 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 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 at 16:04
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 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 at 16:04