faceyspacey / faceyspacey/webpack-flush-chunks
flushChunks not returns shared css between modules
- 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.