Produces bloated runtime in webpack 5 when using `contenthash` or `chunkhash`

[scinos]

• Operating System: OSX 10.15.7
• Node Version: 12.20.1
• NPM Version: 6.14.10
• webpack Version: 5.17.0
• mini-css-extract-plugin Version: 1.3.4

Expected Behavior

When using filename: '[name].[contenthash].css', it produces a runtime chunk that only contains values for existing CSS files.

Actual Behavior

Runtime is bloated with replacement maps that point to inexistent CSS files. For example, using this config:

  plugins: [new MiniCssExtractPlugin({
    filename: '[name].[id].[contenthash].css',
    chunkFilename: '[name].[id].[contenthash].css',
  })],

I got the following in the runtime:

/******/ __webpack_require__.miniCssF = (chunkId) => {
/******/ 	// return url for filenames based on template
/******/ 	return "" + ({"179":"main","303":"runtime~main"}[chunkId] || chunkId) + "." + chunkId + "." + {"179":"c539139b868f46f81e90","229":"31d6cfe0d16ae931b73c","851":"31d6cfe0d16ae931b73c"}[chunkId] + ".css";
/******/ };

However, only the file main.179.c539139b868f46f81e90.css exists (that is correct). The replacement function includes mapping for chunks that don't have CSS (eg: "303":"runtime~main" or "229":"31d6cfe0d16ae931b73c"). In the case of a big app this results in a bloated runtime.

Note that using chunkhash instead of contenthash does not solve the issue.

How Do We Reproduce?

See https://github.com/scinos/mini-css-bug-contenthash for a reproduction repo.

[alexander-akait]

Yes, we need improve this

[alexander-akait]

Feel free to send a PR, if you ideas how to fix it