duplicate code in multi chunks or sooooo big common chunk file

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.

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

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?

---

i met the same problem. and now i use code splting. each route bunde a js file. just change require to require.ensure.
hi. i use react-router: which route like that:

import React from 'react'
import App from './containers/App'
import childRoutes from './route/childRoutes'

const routes = {
  childRoutes: [
    {
      component: App,
      childRoutes: [
      {
          path: '/',
          getComponent: (location, cb) => {
            // code spilting
            require.ensure([], (require) => {
        
              cb(null, require('./containers/App'))
        
            })
          },
        }
      ]
    }
  ]
}

export default routes

i dont know angularjs can or not can Dynamic routing. but you can bundle each route each js file. you can try this:

define(function(){
   // make sure has a angular module
   require('angular')
  // suppose I define route here
  route.when('#/aaa', function(){
    // a code split point
    require.ensure([],function(require){
    require([
      'services/A',
      'style/a',
      'module/a'
    ])
    })
  }).when('#/bbb', function(){
    // a code split point
    require.ensure([],function(require){
        require([
          'services/A',
          'services/B',
          'style/b',
          'module/b'
        ])
    })
  })
  })// and has many route configs like this
});

In order to make sure that you can change the angular dynamically, you need to import the necessary package at the beginning, and then dynamically change the angular module.

The key is to require incremental change angular.

i hole that would be useful for you.