webpack duplicate code in multi chunks and sooooo big common chunk file

Question

duplicate code in multi chunks or sooooo big common chunk file

Suppose I have a SPA website. And I have a file main.js in which I config the route.

```js
define(function(){
  // suppose I define route here
  route.when('#/aaa', function(){
    // a code split point
    require([
      'services/A',
      'style/a',
      'module/a'
    ])
  }).when('#/bbb', function(){
    // a code split point
    require([
      'services/A',
      'services/B',
      'style/b',
      'module/b'
    ])
  }).when('#/ccc', function(){
    // a code split point
    require([
      'services/B',
      'serivces/C',
      'style/c',
      'module/c'
    ])
  }).when('#/ddd', function(){
    // a code split point
    require([
      'services/A',
      'serivces/C',
      'style/d',
      'module/d'
    ])
  })// and has many route configs like this
});
```

I use webpack to bundle code. My webpack.config.js like this

```js
module.exports = {
  entry: {
    main: path.resolve(__dirname, 'main.js')
  },
  output: {
    path: path.resolve(__dirname),
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin({
      name: 'main',
      async: true
    })
  ]
}
```

When I run webpack, various chunks have duplicate services/A services/B etc. code. This is not I want.

I read webpack docs, and then I add minChunks: 2 option to CommonsChunkPlugin.

Then I run webpack again.

Now, every chunk only have its own code. But I also get a big common chunk file, which include services/A, services/B, services/C and other shared code between various page file.

When I run these code, in page /aaa, the /aaa's files loaded, and also the big common chunk file.

Now the big problem is, page /aaa doesn't need services/B and services/C code at all, But the common chunk files contains all shared code between various page files. So the common chunk file is so big, and have many unused code.

I know I can set minChunks to bigger number, but in this way, every page file may agagin have duplicate code.

HELP

Can I have other methods to only load necessary common chunks when route to different page?

Answer 1

just same problem here. And I write a small test, it looks like that webpack can handle multiple common chunks. in your case, maybe we can save common chunks in service/A, service/B and service/C into service/common.js, and other common chunks still go into common.js, try this:

plugins : [
//common chunks from A/B/C go into service/common.js 
new CommonsChunkPlugin(( {
            name : 'service/common',
            minChunks : 2,
            chunks : [ 'service/A', 'service/B', 'sevice/C' ]
        })),
        //this common pkg holds all the other common chunks; and in my test, 
//it MUST comes out in the last of this array 
        new CommonsChunkPlugin( {
            name : 'common.js',
            minChunks : 2
        } )
]