1

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

enter image description here

enter image description here

This bundle was created using webpack 1.15.0.

And the film strip is like thisenter image description here

This is the Webpackanalyzer outputenter image description here

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 enter image description here

This is the uncompressed size.

But the load time increased to 7.09senter image description here

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 chunkingenter image description here

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.

enter image description here

This is the comparision of two routes.enter image description here.

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

2 回答 2

2

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

于 2017-06-19T13:20:10.040 回答
0

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.

于 2017-06-20T05:51:14.160 回答