Runtime loader code ships multiple copies of the chunkMap.hash object

[jsnajdr]

When using the mini-css-extract-plugin in a setup where filename templates for both JS and CSS use the [chunkhash] substitution:

{
  output: {
    filename: '[name].[chunkhash].js'
  },
  plugins: [
    new MiniCssExtractPlugin( {
      filename: '[name].[chunkhash].css'
    } )
  ]
}

then the runtime code will be inflated by shipping two copies of the stringified chunkMap.hash object. One is in jsonpScriptSrc function, second one in the CSS-related code in requireEnsure.

Each call to mainTemplate.getAssetPath creates its own copy. Also, the chunk map object is instantiated (and then GCed) on every requireEnsure call.

Is there a way to extract the map into a local variable? This is probably a webpack core issue rather than issue with this plugin, but I'm not sure.

[alexander-akait]

@jsnajdr sorry for delay, can you provide minimum example?

[jsnajdr]

Hi @evilebottnawi! Here is a repo with a little project that reproduces the issue: https://github.com/jsnajdr/webpack-chunkhash-duplicate

After npm run build, there is file dist/main.[chunkhash].js with two instances of the chunk map object (recreated on every call):

one for JS:

second one for CSS:

For large projects, the chunk map object can get quite big and becomes the largest part of the webpack runtime.

[alexander-akait]

@jsnajdr What you expected, css and js have difference logic for loading chunks

[jsnajdr]

What you expected, css and js have difference logic for loading chunks

I expected that there is only one instance of that object in the shipped webpack runtime.

However different the logic for CSS and JS might be, both chunk hash objects are always identical. Generated by mainTemplate.getAssetPath, in both cases the code to generate the object is:

JSON.stringify(chunk.getChunkMaps().maps)

[alexander-akait]

@jsnajdr hm, PR welcome