Change splitChunks() default: Use single runtime chunk

[rossta]

Problem

Webpacker v4 docs for using the splitChunks() API describe a use case for using multiple entry points on a single page.

In these cases, webpack encourages use of runtimeChunk 'single'.

optimization.runtimeChunk: 'single' is needed when multiple entry points are being used on a single HTML page.

source: https://webpack.js.org/guides/code-splitting/#optimizationruntimechunk

In general, webpack discourages the use of multiple entry points per page:

Using multiple entry points per page should be avoided when possible in favor of an entry point with multiple imports: entry: { page: ['./analytics', './app'] }.

Multiple entry points on a page can lead to surprising behavior, say from duplicated modules.

However, Rails developers seeking to keep their bundles small will be inclined to split their code into multiple packs, especially given prior experience with the Rails asset pipeline.

While documentation can be improved to encourage dynamic imports over multiple entry points as a form of code-splitting, it's reasonable to expect that Rails developers will continue to use multiple entry points per page.

Solution

This PR sets runtimeChunk: 'single' as the default when splitChunks() is enabled to ensure modules across multiple entry points are properly shared.

I propose that this change will improve the "out-of-the-box" developer experience by preventing surprising bugs, i.e., keep Rails devs from shooting themselves in the foot.

The splitChunks optimization is confusing. It would be fair to expect that most developers would not be inclined to learn about its pros, cons, and caveats. Let's improve Webpacker's "conceptual compression" by fixing potential problems with the majority use case. "Pro" users will still be able to override the defaults to meet their needs.

[justin808]

Nice job. It's worth noting that this documentation link:

https://webpack.js.org/configuration/optimization/#optimizationruntimechunk so that it's clear what the old value of true (aka multiple) meant.

Setting optimization.runtimeChunk to true or 'multiple' adds an additional chunk containing only the runtime to each entrypoint. This setting is an alias for:

webpack.config.js

module.exports = {
  //...
  optimization: {
    runtimeChunk: {
      name: entrypoint => `runtime~${entrypoint.name}`
    }
  }
};

[wasifhossain]

the 1st link mentioned in OP is not working anymore due to change in master branch.

updated link: Webpacker docs for using the splitChunks() API describe a use case for using multiple entry points on a single page.

[rossta]

@wasifhossain Thanks, link in the description is now updated