CommonsChunkPlugin: extract common modules from entry *and* child chunks to separate commons chunk

Do you want to request a feature or report a bug?
Potentially a bug or a missing feature

What is the current behavior?
Using CommonsChunkPlugin and the async setting, together with children: true, common modules are aggregated from all child chunks into a separate commons chunk. However, I want common modules from all chunks (child and entry chunks) to aggregate into a separate commons chunk. Here is my current configuration:

new webpack.optimize.CommonsChunkPlugin({
    children: true,
    async: 'vendor',
    minChunks: (module) => {
        const isVendor = module.context.split('/').some(dir => dir === 'vendor');
        return isVendor;
    },
})

After hours of research, reading the docs, and trying various combinations of settings, this doesn’t appear to be possible.

Related StackOverflow issues (with no answers):

Ultimately my goal here is to bundle all modules from node_modules, referenced across all chunks, into a single common chunk.

If the current behavior is a bug, please provide the steps to reproduce.

Minimal test case: https://github.com/OliverJAsh/webpack-commons-vendor/blob/f524bfdb0e047161c453a6b84f89ab6d25d6c648/webpack.config.js

What is the expected behavior?

image

If this is a feature request, what is motivation or use case for changing the behavior?
N/A

Please mention other relevant information such as the browser version, Node.js version, webpack version and Operating System.
webpack 3.10.0

Author: Fantashit

2 thoughts on “CommonsChunkPlugin: extract common modules from entry *and* child chunks to separate commons chunk

  1. It’s currently not possible.

    Ultimately my goal here is to bundle all modules from node_modules, referenced across all chunks, into a single common chunk.

    This hurts your initial app loading performance. Better keep on-demand loaded modules in an async vendor chunk or no vendor chunk at all.

  2. This hurts your initial app loading performance.

    It hurts performance if vendor code (low frequency) is cached busted every time non-vendor (high frequency) code changes, which is the case if vendor code is not aggregated into one bundle. I think it’s a trade off.

    Would webpack consider supporting this?

Comments are closed.