webpack 4 splitChunks.maxSize - what does this value mean? Is it KB? Bytes? Just some value?

Question

I am trying to split my vendor chunk in a Vue JS app using Webpack 4. I have been able to get reasonable results with this setting:

config.optimization.set('splitChunks', {
      cacheGroups: {
        vendors: {
          name: 'chunk-vendors',
          test: /[\\/]node_modules[\\/]/,
          maxSize: 500000,
          minChunks: 1,
          priority: -20,
          chunks: 'all'
        },
        // default Vue JS common chunk
        common: {
          name: 'chunk-common',
          minChunks: 2,
          priority: -30,
          chunks: 'initial',
          reuseExistingChunk: true
        }
      }
    })

But I could not find anything in the documentation that explains what the number for maxSize represents. Is bytes, KB, or an arbitrary number? It's hard to "guess" what the right value might be for my application without understanding what the number means.

Also, is it the pre-minified size or the gzipped size?

From the link you posted: "Using maxSize ... tells webpack to try to split chunks bigger than __maxSize bytes__ into smaller parts..." — Michal Levý, Feb 07 '20 at 22:04

score 3 · Accepted Answer · answered Feb 10 '20 at 15:58

3

Here's the final answer: splitChunks.maxSize measures in bytes

https://webpack.js.org/plugins/split-chunks-plugin/#splitchunksmaxsize

"...tells webpack to try to split chunks bigger than maxSize bytes into smaller parts..."

webpack 4 splitChunks.maxSize - what does this value mean? Is it KB? Bytes? Just some value?

1 Answers1