faceyspacey / faceyspacey/webpack-flush-chunks
Duplicate CSS files while flushing
- Dominant language
- JavaScript
- Stars
- 354
- Forks
- 30
- PR merge metrics
- No merged PRs in 30d
Description
I am migrating a project to use flush chunks. Unfortunately I see duplicate entries for my main CSS assets being generated:
```js
import flushChunks from 'webpack-flush-chunks'
const chunks = flushChunks(clientStats, {
// TODO: This part should be dynamic later on based on the#
// chunks which were rendered with the render call just before.
chunkNames: [ "main" ]
})
```
When using
```js
return `
${helmet.title.toString()}
${helmet.meta.toString()}
${helmet.link.toString()}
${chunks.styles.toString()}
`
```
I see the following style rules being added to the head:
```html
```
This is with Webpack v4, a single "entry", and split chunks instructions for vendor and runtime:
```js
return {
mode: isDev ? "development" : "production",
stats: "minimal",
entry: [
resolve("src/@browser/index.js")
],
// You may want 'eval' (in dev) instead if you prefer to see the compiled output in DevTools.
// See the discussion in https://github.com/facebook/create-react-app/issues/343
devtool: isDev ? "cheap-module-source-map" : "source-map",
output: {
path: resolve(distDirectory),
publicPath: '/static/',
hashFunction: Hasher,
hashDigest: "base52", // A-Za-z
hashDigestLength: 8,
filename: isDev ? "bundle-[name].js" : "bundle-[name]-[chunkhash].js",
chunkFilename: isDev ? "chunk-[name].js" : "chunk-[name]-[chunkhash].js",
crossOriginLoading: "anonymous"
},
optimization: {
minimize: !isDev,
runtimeChunk: true,
splitChunks: {
cacheGroups: {
commons: {
test: /[\\/]node_modules[\\/]/,
name: 'vendor',
chunks: 'all'
}
}
},
....
```
Contributor guide
No contributing guide indexed for this repository
Research direction
Start by reproducing the shown flushChunks call with the Webpack 4 configuration, then trace how chunks.styles is assembled from the generated vendor and runtime chunks. Compare the emitted asset list with the rendered HTML; done means each CSS asset is included only once.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, webpack
- Domain
- build-system
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100