Handling async chunks from splitChunks?

[leebenson]

Using Webpack 4, this plugin works perfectly with sync chunks, but doesn't handle async chunks generated by import() statements.

A dump of my manifest.json:

{
  "assets/img/logo.png": "assets/img/logo.png",
  "main.css": "assets/css/main.d41d8cd98f00b204e9800998ecf8427e.css",
  "main.css.map": "assets/css/main.d41d8cd98f00b204e9800998ecf8427e.css.map",
  "main.js": "assets/js/main.530c2d547d428f017101.js",
  "main.js.map": "assets/js/main.530c2d547d428f017101.js.map"
}

But on the filesystem:

[webdeveric]

@leebenson I looked into this a long time ago (Webpack v1) and from what I can remember, it wasn't possible/feasible to get a name for chunks loaded with require.ensure (now import()). And since async chunks are loaded from other files (main.530c2d547d428f017101.js in your example) and not loaded directly with a <script> tag, I didn't see the need to include them in the manifest.json.

Assuming I can get the async chunk URLs into the manifest, how would you use them? Maybe there is a valid reason I can't think of at the moment.

[webdeveric]

@leebenson After looking into this a bit, I've found that you can opt-in to having your async chunks included in the manifest.json by providing a webpackChunkName comment in the import(). I'm still looking at it to see if this can be automated.

Example:

import(/* webpackChunkName: "[request]" */ './some-file.js');

[persocon]

I saw that it goes to the root of the manifest, is it possible to include it to the entrypoint it belongs?
the idea behind it is to make custom prefetch of assets

[mxmul]

+1 for associating the async chunks with their entrypoints somehow. I'd like to do something similar to GoogleChromeLabs/preload-webpack-plugin in my application, but this plugin doesn't currently tell me which assets should be preloaded/prefetched for a given entrypoint.

[huzhongchun]

Have you resolve this problem? @leebenson

[pavelloz]

https://github.com/danethurber/webpack-manifest-plugin - this plugin seems to do it pretty good

[mxmul]

For my specific use-case (preloading React components in async chunks), the @loadable library solved the problem (specifically the SSR integration).