Create-react-app: Module names in split chunks

Created on 2 Jan 2018  路  4Comments  路  Source: facebook/create-react-app

Is this a bug report?

Nope.

I've a few dynamic imports using await import('./Component'), and my asset-manifest looks like this.

{
  "main.css": "static/css/main.de8287b1.css",
  "main.css.map": "static/css/main.de8287b1.css.map",
  "main.js": "static/js/main.d22893b1.js",
  "main.js.map": "static/js/main.d22893b1.js.map",
  "static/js/0.49a74c0b.chunk.js": "static/js/0.49a74c0b.chunk.js",
  "static/js/0.49a74c0b.chunk.js.map": "static/js/0.49a74c0b.chunk.js.map",
  "static/js/1.89a525da.chunk.js": "static/js/1.89a525da.chunk.js",
  "static/js/1.89a525da.chunk.js.map": "static/js/1.89a525da.chunk.js.map",
  "static/js/2.9b9d5b24.chunk.js": "static/js/2.9b9d5b24.chunk.js",
  "static/js/2.9b9d5b24.chunk.js.map": "static/js/2.9b9d5b24.chunk.js.map",
  "static/js/3.7d184c0a.chunk.js": "static/js/3.7d184c0a.chunk.js",
  "static/js/3.7d184c0a.chunk.js.map": "static/js/3.7d184c0a.chunk.js.map",
  "static/js/4.05ee1fbd.chunk.js": "static/js/4.05ee1fbd.chunk.js",
  "static/js/4.05ee1fbd.chunk.js.map": "static/js/4.05ee1fbd.chunk.js.map",
  "static/js/5.7a0a23d9.chunk.js": "static/js/5.7a0a23d9.chunk.js",
  "static/js/5.7a0a23d9.chunk.js.map": "static/js/5.7a0a23d9.chunk.js.map",
  "static/js/6.9bece200.chunk.js": "static/js/6.9bece200.chunk.js",
  "static/js/6.9bece200.chunk.js.map": "static/js/6.9bece200.chunk.js.map",
  "static/js/7.8e5bac62.chunk.js": "static/js/7.8e5bac62.chunk.js",
  "static/js/7.8e5bac62.chunk.js.map": "static/js/7.8e5bac62.chunk.js.map"
}

As you can see, the dynamic import filenames are not very helpful. Surely there's a Webpack plugin that uses human readable names, how about?

It would at least make it easier to see what is being imported dynamically.

Most helpful comment

Docs.
await import(/* webpackChunkName: "my-component" */ './Component')

It will produce a fancy filename for chunks. Thanks to the default configuration for output.chunkFilename. Production version also adds an unique fingerprint to each chunk as in your example.

All 4 comments

Docs.
await import(/* webpackChunkName: "my-component" */ './Component')

It will produce a fancy filename for chunks. Thanks to the default configuration for output.chunkFilename. Production version also adds an unique fingerprint to each chunk as in your example.

I totally forgot about that you can use comments for that, but now that I remember it; I don't want to use it, because it's verbose, and requires manual tinkering. I'd very much prefer that it would be automatic, with manual override just like that if the automatic value doesn't work for me.

But I'm guessing it's not easy as I hoped it is?

The fingerprint is great for cachebusting, I have no problems with it.

AFAIK It is impossible to get automatically named chunks yet.

Shame.

Was this page helpful?
0 / 5 - 0 ratings