Allow specific entrypoints in `splitChunks.chunks` option

Do you want to request a feature or report a bug?
A feature

What is the current behavior?

configuration.optimization.splitChunks.chunks should be one of these:
      "initial" | "async" | "all"

It would be handy to be able to specify particular entry points here.

If this is a feature request, what is motivation or use case for changing the behavior?
In Storybook, we have two entry points: “manager” mostly contains our library code, and “preview” contains the user code, and is loaded in an iframe. So, for purposes of long-term caching it only makes sense to split vendor chunk in “preview” entry point. Plus, there’s currently no easy way to use HtmlWebpackPlugin with multiple entry points, each of which has split chunks, see jantimon/html-webpack-plugin#882

Author: Fantashit

5 thoughts on “Allow specific entrypoints in `splitChunks.chunks` option

  1. It’s seems like can filter entry points by pass test option.
    My solutions:

    function filterByEntryPoint(entry){
    	return function(module, chunks){
    		for (let i=0;i<chunks.length;i++) {
    			const chunk = chunks[i];
    			if (chunk.groupsIterable) {
    				for (const group of chunk.groupsIterable) {
    					if (group.getParents()[0] && group.getParents()[0].name === entry) {
    						return true;
    					}
    				}
    			}
    		}
    		return false;
    	}
    }

    then put the function to test option.

    splitChunks:{
    			cacheGroups: {
    				default: false,
    				vendors: false,
    				desktop: {
    					name: "desktop-common",
    					minChunks: 3,
    					chunks: "async",
    					test: filterByEntryPoint("index")
    				},
    				mobile: {
    					name: "m-common",
    					minChunks: 3,
    					chunks: "async",
    					test: filterByEntryPoint("indexMobile")
    				}
    			}
    		},
  2. Works for us ("webpack": "4.8.1"):

      optimization: {
        removeAvailableModules: false,
        removeEmptyChunks: false,
        splitChunks: {
          cacheGroups: {
              // In dev mode, we want all vendor (node_modules) to go into a chunk,
              // so building main.js is faster.
              vendors: {
                test: /[\\/]node_modules[\\/]/,
                name: "vendors",
                // Exclude pre-main dependencies going into vendors, as doing so
                // will result in webpack only loading pre-main once vendors loaded.
                // But pre-main is the one loading vendors.
                // Currently undocument feature:  https://github.com/webpack/webpack/pull/6791
                chunks: chunk => chunk.name !== "pre-main.min"
              }
          }
        }
      },
  3. I’m pretty sure that the post from two years ago is correct – we were using 4.8.1 then. You can find it here: https://www.npmjs.com/package/webpack/v/4.8.1

    Currently we’re running 4.40.1 with this:

        splitChunks: {
          cacheGroups: {
            // We want all vendor (node_modules) to go into a chunk.
            vendors: {
              test(module, chunks) {
                // The (production) vendors bundle only includes modules that are
                // referenced from the main chunk.
                // Modules under node_modules that are referenced from the test bundle should not
                // be included (they are bundled into the test bundle).
                const isInChunk = chunkName => chunks.some(chunk => chunk.name === chunkName);
                const vendorExcludes = ['bootstrap', 'pre-main', 'start', 'analytics'];
                return (
                  isVendorsModule(module) &&
                  isInChunk('app') &&
                  !vendorExcludes.some(bundle => isInChunk(bundle))
                );
              },
              name: 'vendors',
              // 'all' is confusing - it basically means test all modules regardless if they
              // are statically (via require(x)/import 'x'; ie 'initial' option)
              // or dynamically (via import('x'); ie 'async' option)
              // loaded.
              chunks: 'all'
            }
          }
        }
    

Comments are closed.