[Bug]: The order of CSS chunks may be incorrect, affecting the consistency of the build results

[LyunKi]

System Info

System:
OS: Windows 11 10.0.26100
CPU: (28) x64 Intel(R) Core(TM) i7-14700
Memory: 4.21 GB / 31.78 GB
Binaries:
Node: 20.19.5
npm: 10.8.2
bun: 1.3.1
Browsers:
Chrome: 143.0.7499.109
Edge: Chromium (140.0.3485.94)
Internet Explorer: 11.0.26100.1882

Details

使用 rsbuild 构建后，发现多次构建时（CIE使用相同的构建镜像，但在不同的构建机器上)，生成的cssChunks顺序（包括变量顺序）无法保证，导致出现多次构建，结果不一致的问题。

由于环境问题，不方便上传图片

大致结果如下：

var cssChunks = {
"3198" : 1,
"4711": 1,
}

和

var cssChunks = {
"4711": 1,
"3198": 1,
}

尝试在rspack源码中搜索后发现
xxx_loading.ejs

var installedCssChunks = {
	<%- _installed_chunks %>
};

<%- ENSURE_CHUNK_HANDLERS %>.miniCss = function (chunkId, promises) {
	var cssChunks = <%- _css_chunks %>;
	if (installedCssChunks[chunkId]) promises.push(installedCssChunks[chunkId])
	else if (installedCssChunks[chunkId] !== 0 && cssChunks[chunkId])
		promises.push(
			installedCssChunks[chunkId] = loadStylesheet(chunkId).then(
				function () {
					installedCssChunks[chunkId] = 0;
				},
				function (e) {
					delete installedCssChunks[chunkId];
					throw e;
				}
			)
		)
}

runtime.rs

            "_css_chunks": format!(
              "{{\n{}\n}}",
              chunks
                .iter()
                .filter_map(|id| {
                  let chunk = compilation.chunk_by_ukey.expect_get(id);

                  chunk.id().map(|id| {
                    format!(
                      "{}: 1,\n",
                      serde_json::to_string(id).expect("json stringify failed")
                    )
                  })
                })
                .sorted_unstable()
                .collect::<String>()
            )

从代码推测 sorted_unstable 不能稳定保证生成的cssChunks顺序

Reproduce link

No response

Reproduce Steps

见问题详情

[LyunKi]

more info about this issue, it seems that the results of sort unstable in different env have different results

[JSerFeng]

从代码推测 sorted_unstable 不能稳定保证生成的cssChunks顺序

Chunk id is guarenteed to be unique, so it's actually safe here, at least in that code snippet.

What's your rspack version, try upgrading first, we've fixed some chunk id unstable issue earlier

[LyunKi]

从代码推测 sorted_unstable 不能稳定保证生成的cssChunks顺序

Chunk id is guarenteed to be unique, so it's actually safe here, at least in that code snippet.

What's your rspack version, try upgrading first, we've fixed some chunk id unstable issue earlier

Finally I resolved this issue by reducing chunks with splitChunks.cacheGroups api

asyncVendor: {
                test: /[\\/]node_modules[\\/]/,
                name: 'async-vendor',
                chunks: 'async',
                priority: 50,
                reuseExistingChunk: true,
                enforce: true,
              },
              asyncSrc: {
                test: /[\\/]src[\\/]/,
                name: 'async-src',
                chunks: 'async',
                priority: 49,
                enforce: true,
                reuseExistingChunk: true,
              }

rsbuild version: "@rsbuild/core": "1.3.12"