title: webpack route based code splitting reduced my bundle size but increased my chunk size
body: <p>My bundle size was around 2MB uncompressed and 400kb compressed </p>
  
  <p><a href="https://i.stack.imgur.com/ccOUl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ccOUl.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/ATpCz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ATpCz.png" alt="enter image description here"></a></p>
  
  <p>This bundle was created using webpack <strong>1.15.0</strong>. </p>
  
  <p>And the film strip is like this<a href="https://i.stack.imgur.com/MAw9o.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MAw9o.png" alt="enter image description here"></a></p>
  
  <p>This is the Webpackanalyzer output<a href="https://i.stack.imgur.com/oSALY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oSALY.png" alt="enter image description here"></a></p>
  
  <p>Then i have updated webpack to <strong>2.6.1</strong> and enabled code spliting and moved all third party js to vendor.js, Now bundle.js was containing only my app's code.</p>
  
  <p>My bundle size is like this
  <a href="https://i.stack.imgur.com/TUfof.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TUfof.png" alt="enter image description here"></a></p>
  
  <p>This is the uncompressed size.</p>
  
  <p>But the load time increased to <strong>7.09s</strong><a href="https://i.stack.imgur.com/Z3JV6.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Z3JV6.png" alt="enter image description here"></a></p>
  
  <p>Then we tried <a href="https://webpack.js.org/guides/code-splitting-async/" rel="nofollow noreferrer">chunking based on routes</a>. using <strong>require.ensure</strong>. We thought the bundle which 1.75mb will be broken into small chunks based on routes. But each route's chunk was much bigger than expected. And the sum of the total routes chunk is more than the bundle.js size</p>
  
  <p>Here is the final result after enabling route based chunking<a href="https://i.stack.imgur.com/f5U42.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f5U42.png" alt="enter image description here"></a></p>
  
  <p>As you can see bundle.js is reduced from 1.75MB to <strong>180kb</strong>.</p>
  
  <p>As I can see from WebpackBundle Analyzer , Each chunk has its node_modules inside each chunk. This node modules are same for all the chunks.</p>
  
  <p><a href="https://i.stack.imgur.com/41wXs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/41wXs.png" alt="enter image description here"></a></p>
  
  <p>This is the comparision of two routes.<a href="https://i.stack.imgur.com/vcTgH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vcTgH.png" alt="enter image description here"></a>.</p>
  
  <p>Is there any way to reduce the chunk size of each route ?</p>
  
  <p>I am using CommonChunkPlugin.</p>
  
  <pre><code>new CommonsChunkPlugin({
              name: 'common',
              filename: 'commons-[hash:8].js',
               chunks: ['vendor'],
               minChunks: Infinity
          }),
  new webpack.optimize.CommonsChunkPlugin({ name: 'meta', chunks: ['vendor'], filename: 'meta.[hash].js' }),
  </code></pre>