title: Most optimal way to split up JavaScript chunks
body: <p>I am in a dilemma as to how to split my javascript bundle.</p>
  <p>Let's say the bundle is 1000kb. My intuition tells me I should split it into as many chunks of equal size as possible until the overhead of having a very small chunk introduces diminishing returns. This is with the assumption that we can benefit from issuing requests for each chunk in parallel at the same time, and so if we start them at the same time, we better minimize the size of the largest chunk.</p>
  <p>So, that would result in, say, splitting it into 100 chunks of 10kb.</p>
  <p>At the same time, 100 chunks seem like a lot to me. Perhaps the browser cannot handle that many requests at the same time.</p>
  <p>So, it looks like there are several parameters here:</p>
  <ul>
  <li>number of chunks</li>
  <li>relative size of chunks</li>
  </ul>
  <p>How should the two be optimized? Are there any additional parameters?</p>
  <p>My current split looks as follows:
  <a href="https://i.stack.imgur.com/AUs54.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AUs54.png" alt="enter image description here" /></a></p>
  <p>This is generated from:</p>
  <pre><code>  optimization: {
      usedExports: true,
      splitChunks: {
        chunks: 'all',
        maxInitialRequests: 8,
        minSize: 200000,
        maxSize: 500000,
        cacheGroups: {
          vendor: {
            test: /[\\/]node_modules[\\/]/,
            name(module) {
            // get the name. E.g. node_modules/packageName/not/this/part.js
            // or node_modules/packageName
            const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
    
          // npm package names are URL-safe, but some servers don't like @ symbols
          return `npm.${packageName.replace('@', '')}`;
          },
        },
      },
     },
    },
  
  </code></pre>
  <p>No matter how I tweak the above numbers, the chunks never follow those bounds. How could I make them follow their bounds? What unit are these bounds defined with (parsed / gzipped size)? How can I get rid of the very small generated chunks?</p>