siblings not specified correctly in chunk（stats json） #19754
Description
Here is the setting for webpack
cacheGroups: {
lib: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
name: 'lib_haha',
enforce: true,
reuseExistingChunk: true,
},
commonAsync: {
name: 'commonAsync_haha',
chunks: 'async',
minChunks: 2,
priority: -20,
enforce: true,
},
commonInitial: {
name: 'commonInitial_haha',
chunks: 'initial',
minChunks: 2,
priority: -15,
enforce: true, // reuseExistingChunk: true,
},
},Here is the js file
btn.onclick = () => {
import('./async1' /* webpackChunkName: "foo" */
).then(e => {
console.log("async1", e)
e.async1()
import('./async2' /* webpackChunkName: "bar" */
).then(e => {
e.async2()
console.log(e)
console.log("index", dayjs().format(), hello)
})
})
}We can see above that 'foo' and 'bar' should be async chunks, And there are some common parts in 'foo' and 'bar' which will be separated as another chunk named commonAsync_haha due to the cacheGroups config.
However in the stats json
{
"rendered": true,
"initial": false,
"entry": false,
"recorded": false,
"size": 137,
"sizes": { "javascript": 137 },
"names": ["bar"],
"idHints": [],
"runtime": ["runtime"],
"files": ["bar.js"],
"auxiliaryFiles": [],
"hash": "b442fc42eec6ab766a95",
"childrenByOrder": {},
"id": "bar",
"siblings": ["commonAsync_haha"],
"parents": ["commonInitial_haha", "index", "lib_haha", "runtime"],
"children": [],
},
{
"rendered": true,
"initial": false,
"entry": false,
"recorded": false,
"reason": "split chunk (cache group: commonAsync) (name: commonAsync_haha)",
"size": 85,
"sizes": { "javascript": 85 },
"names": ["commonAsync_haha"],
"idHints": ["commonAsync"],
"runtime": ["runtime"],
"files": ["commonAsync_haha.js"],
"auxiliaryFiles": [],
"hash": "0dfd0fa2b5b03aaf5b88",
"childrenByOrder": {},
"id": "commonAsync_haha",
"siblings": ["bar", "foo"],
"parents": ["commonInitial_haha", "index", "lib_haha", "runtime"],
"children": [],
},
{
"rendered": true,
"initial": false,
"entry": false,
"recorded": false,
"size": 137,
"sizes": { "javascript": 137 },
"names": ["foo"],
"idHints": [],
"runtime": ["runtime"],
"files": ["foo.js"],
"auxiliaryFiles": [],
"hash": "b629a11b05221e528bda",
"childrenByOrder": {},
"id": "foo",
"siblings": ["commonAsync_haha"],
"parents": ["commonInitial_haha", "index", "lib_haha", "runtime"],
"children": [],
},The siblings of foo/bar are ["commonAsync_haha"], while the siblings of commonAsync_haha is ["bar", "foo"].
Here is the webpack "version": "5.100.2",