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