flushChunks not returns shared css between modules

[MartinGian]

Hi!

Awesome library, SSR + Code Splitting is a very common problem and you resolved it very well here :)

I would like to integrate it to an already production project, but we have an issue with the css files shared between modules.

For example, I have a Home module, and when I navigates to it to render synchronously, the chunkNames array is

[ 'Home', 'searchForm' ],

When I execute flushChunks:

  const { scripts, stylesheets } = flushChunks(stats, {
    chunkNames,
  });

This is the result:

[ 'js/Home.717e415a5908f7599b0a.chunk.js', 'js/searchForm.876649092bef6d33b3e8.chunk.js', 'js/main.ad7ec855eb95d76053ca.js' ] [ 'css/main.9eb3c8d1.css', 'css/Home.72db2c6e.chunk.css', 'css/searchForm.6a9b3cfc.chunk.css' ]

The thing is that when the browser loads the page, it gets some others js and css files on demand, but those css files are needed in the first paint, because otherwise generates a weird user experience changing width and height of items, among others things :(.

The other files I am talking about in this case are:

['css/default~Home~addressForm~checkoutRouter~landing~myAddresses~myOrders~shopDetailsRouter~shopsList.9eb5c300.chunk.css', 'css/default~Home~addressForm~checkoutRouter~landing~myOrders~shopDetailsRouter~shopsList.857b76b4.chunk.css']

It seems that those files are shared between modules (all those are module names).
Is there any way to get those files in the flushChunks call?

If you need more details please let me know.

Thanks!

[dashukin]

Hi @MartinGian, could you please share your webpack stats output? It seems it contains only assetsByChunkName property which is not enough to extract shared chunks.

In my case I'm using webpack-stats-plugin with fields property set to null to include all shared chunks as well, but there's a side effect - stats file is nearly 60Mb and parsing takes almost 700ms what is quite a lot..

@faceyspacey, do you have by the chance any recipe to handle dynamic chunks in more accurate and faster way?