Reputation: 77
I'm using dynamic imports in a JS project with Webpack, and the chunks created from the dynamic imports have corresponding vendors~[name].chunk.js
chunks. I'd like to include the vendors chunk inside the corresponding [name].chunk.js
, i.e. not split it off into its own chunk.
webpack config:
module.exports = {
output: {
// ...
chunkFilename: '[name].chunk.js',
},
}
app code:
const Component = React.lazy(() =>
import(/* webpackChunkName: "component" */ './Component')
);
produces
vendors~component.chunk.js
and component.chunk.js
Upvotes: 4
Views: 1710
Reputation: 7494
It's a bit non-trivial because webpack will adjust your output based on the chunk file sizes specific to your project, but as a rule of thumb, this added to your webpack config will disable the seperatred vendor chunk:
optimization: {
splitChunks: {
chunks() {
return false;
},
},
},
This means what you currently see in vendors~component.chunk.js
will be included in component.chunk.js
.
it works by disabling split chunk behaviour, which by default is enabled on all async chunks, ie compontents using import().
See https://webpack.js.org/plugins/split-chunks-plugin/#splitchunkschunks
Upvotes: 2