webpack route based code splitting reduced my bundle size but increased my chunk size

Question

My bundle size was around 2MB uncompressed and 400kb compressed

This bundle was created using webpack 1.15.0.

And the film strip is like this

This is the Webpackanalyzer output

Then i have updated webpack to 2.6.1 and enabled code spliting and moved all third party js to vendor.js, Now bundle.js was containing only my app's code.

My bundle size is like this

This is the uncompressed size.

But the load time increased to 7.09s

Then we tried chunking based on routes. using require.ensure. 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

Here is the final result after enabling route based chunking

As you can see bundle.js is reduced from 1.75MB to 180kb.

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.

This is the comparision of two routes..

Is there any way to reduce the chunk size of each route ?

I am using CommonChunkPlugin.

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' }),

Answer 1

As @user1471177 mentioned. I have add one more CommonChunkPlugin which makes common code of all the route's chunks in to one common chunk.

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' }),
new webpack.optimize.CommonsChunkPlugin({ name: 'common', chunks: ['0','1','2',.......'30'], filename: 'common.[hash].js' , minChunks: 2}),

Which seperated all the common code in to one common.js chunk.

Answer 2

Looks like what you need is CommonsChunkPlugin https://webpack.js.org/plugins/commons-chunk-plugin/#components/sidebar/sidebar.jsx