CODEWITHSUNDEEP
webpackbundlewebpack-4
Alimo
Alimo

Reputation: 197

My Webpack vendor bundle size is very large (Almost 2 MB), how can I make multiple vendor chunks

Here is the code I use in my webpack.config.js to create the chunks:

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all'
      },
    },
  },
}

I have chunks for app, main, runtime and vendor and the vendor is very large in size. I would like to have smaller chunks for vendor in my React project. I am using webpack 4.

When I add maxSize in the splitChunks, it does not work as expected and just changes the name of the output bundle. I am using contenthash as part of the output file name for caching:

output: {
  path: settings.distPath,
  filename: isDevMode ? 'js/[name].bundle.js' : 'js/[name].[contenthash:7].bundle.js'
}

Upvotes: 3

Views: 5230

Answers (1)

ultimoTG
ultimoTG

Reputation: 953

maxSize can be defined globally for optimization.splitChunks.maxSize or per cache group - optimization.splitChunks.cacheGroups[x].maxSize. In your case, you want to add it for the vendor cache group. The following should split your vendor bundle into smaller ones.

optimization: {
  runtimeChunk: 'single',
  splitChunks: {
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
        maxSize: 50000, //or whatever size you want
      },
    },
  },
}

Upvotes: 3

Related Questions