faceyspacey / faceyspacey/webpack-flush-chunks

flushChunks not returns shared css between modules

Open
#79 1 comment 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
354
Forks
30
PR merge metrics
No merged PRs in 30d

Description

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!

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.