Slow re-build time when changing JSX structure in React component

[bostondv]

Slow re-build time when changing JSX structure in React component

[jerrykingxyz]

@bostondv Can you provide a performance trace file?

// https://web-infra-dev.github.io/rspack-dev-guide/profiling/intro.html#chrome
RSPACK_PROFILE=TRACE=layer=chrome npm run dev

// modify the file like example 1 and waiting for rebuild finish
...

// modify the file like example 2 and waiting for rebuild finish
...

// Ctrl + C and find .rspack-profile-${timestamp}/trace.json in the current working directory.

[bostondv]

Thanks @jerrykingxyz

Here's the trace.json (160MB)

[bostondv]

Thanks for pointing out the profiling guide btw. I uploaded the track to https://ui.perfetto.dev/ and can see that in example 1, the bulk of the time is spent in chunk splitting which doesn't happen in example 2 rebuild.

example 1:

example 2:

Any idea why one change causes different behaviour than the other?

[jerrykingxyz]

It seems that example 1 is not using cache and re-splitting chunks, this behavior is not expected, it should only happen when modify imports/exports.
I will try to fix it in the next version of 0.5.x, you can try disable optimization.mergeDuplicateChunks in development mode to make split chunks faster.

[bostondv]

Thank you @jerrykingxyz!

By the way, disabling optimization.mergeDuplicateChunks in development made a huge difference. Reduced rebuilds to about ~5.5s which is very helpful in the meantime.

[jerrykingxyz]

Should been fixed by #5694