SplitChunksPlugin | webpack

Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The CommonsChunkPlugin was used to avoid duplicated dependencies across them, but further optimizations were not possible.
Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks.
Out of the box SplitChunksPlugin should work well for most users.
By default it only affects on-demand chunks, because changing initial chunks would affect the script tags the HTML file should include to run the project.
Webpack will automatically split chunks based on these conditions:
When trying to fulfill the last two conditions, bigger chunks are preferred.
The default request limits are heuristic guardrails, not HTTP/1-specific recommendations. Browsers and transports such as HTTP/2 can handle many parallel requests, but extra chunks still add scheduling, header, cache lookup, parsing, and evaluation overhead. If your app benefits from more granular chunks, adjust splitChunks.maxAsyncRequests and splitChunks.maxInitialRequests, then measure the result for your users.
Webpack provides a set of options for developers that want more control over this functionality.
The default configuration was chosen to fit web performance best practices, but the optimal strategy for your project might differ. If you're changing the configuration, you should measure the effect of your changes to ensure there's a real benefit.
This configuration object represents the default behavior of the SplitChunksPlugin in production mode; the comments give the values used in the other modes.
When files paths are processed by webpack, they always contain / on Unix systems and \ on Windows. That's why using [\\/] in {cacheGroup}.test fields is necessary to represent a path separator. / or \ in {cacheGroup}.test will cause issues when used cross-platform.
Since webpack 5, passing an entry name to {cacheGroup}.test and using a name of an existing chunk for {cacheGroup}.name is no longer allowed.
By default webpack will generate names using origin and name of the chunk (e.g. vendors-main.js). This option lets you specify the delimiter to use for the generated names.
'initial' | 'async' | 'all' = 'async' RegExp (chunk: Chunk) => boolean | undefined
This indicates which chunks will be selected for optimization. When a string is provided, valid values are all, async, and initial:
A chunk counts as initial when at least one of the chunk groups it belongs to is loaded with the page, so a chunk that is part of an entry point and is additionally pulled in by an import() somewhere else is treated as initial rather than async. Providing all can be particularly powerful, because it means that chunks can be shared even between async and non-async chunks.
Note that it is applied to the fallback cache group as well (splitChunks.fallbackCacheGroup.chunks).
Alternatively, you may provide a function for more control. The return value will indicate whether to include each chunk.
If you are using webpack version 5.86.0 or later, you can also pass a regular expression:
Combine this with output.html — webpack generates the page and injects every generated vendor chunk for you, for a single page or one page per entry. See Native HTML.
Maximum number of parallel requests when on-demand loading.
The default value of splitChunks.maxAsyncRequests depends on the mode:
Maximum number of parallel requests at an entry point.
The default value of splitChunks.maxInitialRequests depends on the mode:
string[] = ['javascript', 'css', 'unknown']
Sets the size types which are used when a number is used for sizes. When the built-in CSS support (experiments.css) is disabled, the default is ['javascript', 'unknown'].
The minimum times must a module be shared among chunks before splitting.
Prevents exposing path info when creating names for parts splitted by maxSize.
number Record<string, number>
Minimum size, in bytes, for a chunk to be generated.
The default value of splitChunks.minSize depends on the mode:
number Record<string, number>
Minimum size reduction to the main chunk (bundle), in bytes, needed for a chunk to be generated. Meaning if splitting into a chunk does not reduce the size of the main chunk (bundle) by the given amount of bytes, it won't be split, even if it meets the splitChunks.minSize value.
Both splitChunks.minSizeReduction and splitChunks.minSize need to be fulfilled for a chunk to be generated.
Size threshold at which splitting is enforced and other restrictions (minRemainingSize, maxAsyncRequests, maxInitialRequests) are ignored.
The default value of splitChunks.enforceSizeThreshold depends on the mode:
splitChunks.minRemainingSize option was introduced in webpack 5 to avoid zero sized modules by ensuring that the minimum size of the chunk which remains after splitting is above a limit.
The default value of splitChunks.minRemainingSize depends on the mode:
It doesn't need to be specified manually except for the rare cases where deep control is required.
splitChunks.minRemainingSize only takes effect when a single chunk is remaining.