Combine vendor chunk into chunk created with dynamic import in Webpack

user_3880608 0
Viewed 595

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

webpack javascript
1 Answers

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

user_5692130
Related