CommonsChunkPlugin not removing all common chunks when used more than once

While porting a pre-existing application over to webpack I ran into an issue while cleaning up dependencies. The current setup is that 3rd party (vendor) libraries would go in a ‘vendor’ chunk and application global ones in ‘global’. There are various entry points in the application (not single-page) and thus the grouping helps with de-duplication.

To make this work I created a vendor and global entry, hoping to rely on CommonsChunkPlugin to resolve duplicates. This appears to work, but only partially. A test case of my setup is listed below, but the result is that global-1.js, which main.js requires, makes it both in the generated global.js as well as main.js, rather than just in the global.js. If in the config I move the entry of global-1.js to the vendor chunk, it does properly exclude the chunk from the generated main.js.

Files for repro case:

webpack.config.js:

'use strict';

var path = require("path");
var webpack = require("webpack");

module.exports = {
  entry: {
    vendor: [
      "./modules/vendor-1",
      "./modules/vendor-2",
    ],
    global: [
      "./modules/global-1.js",
      "./modules/global-2.js",
    ],

    main: "./main.js",
  },
  plugins: [
    // XXX: there appears to be a bug in webpack here, even though a chunk
    // is common to global and main, it makes it into both.  The plugin
    // only appears to work properly for the first instantiation (vendor).
    new webpack.optimize.CommonsChunkPlugin("vendor", "vendor.js", Infinity),
    new webpack.optimize.CommonsChunkPlugin("global", "global.js", Infinity),
  ],
  output: {
    path: path.join(__dirname, "js"),
    filename: "[name].js",
  }
};

main.js:

require("./modules/vendor-1")
require("./modules/vendor-2")
require("./modules/global-1.js")

modules/vendor-1.js:

// vendor-1

modules/vendor-2.js:

// vendor-1

modules/global-1.js:

// global-1

modules/global-2.js:

// global-2

global.js output:

webpackJsonp([2],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(3);
    module.exports = __webpack_require__(4);


/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {

    // global-1

/***/ },
/* 4 */
/***/ function(module, exports, __webpack_require__) {

    // global-2

/***/ }
]);

generated main.js output, note the global-1 section that also appears in the generated global.js:

webpackJsonp([0],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {

    __webpack_require__(1)
    __webpack_require__(2)
    __webpack_require__(3)


/***/ },
/* 1 */,
/* 2 */,
/* 3 */
/***/ function(module, exports, __webpack_require__) {

    // global-1

/***/ }
]);

Author: Fantashit

1 thought on “CommonsChunkPlugin not removing all common chunks when used more than once

  1. @sokra: From the referenced commit I gather that it is not allowed to have multiple CommonChunks with minChunks set to Infinity. However, for my case, I want to have 3 chunks:

    1. One for critical vendor scripts (to be included in the HEAD-section of my web page)
    2. Non-critical vendor scripts, to be put last in the body
    3. Application scripts, to be put last in the body

    Is this use-case supported in any way?

Comments are closed.