Re-building development bundle step very slow

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

Since migrating to v4 from v2 we have been experiencing a rather unpleasant local development setup. Everything got slower in building. I managed to score some easy wins on the Building development bundle (mainly around mini-css-extract-plugin) and brought it down significantly but the Re-building development bundle is still very slow.

Here’s an example log. The changes i am doing is copy chaning on our index https://bold.org/

success Writing page-data.json files to public directory - 0.357s - 3/1947 5461.25/s
success onPreExtractQueries - 0.002s
success extract queries from components - 0.612s
success write out requires - 0.061s
success run page queries - 0.015s - 1/1 67.64/s
success Writing page-data.json files to public directory - 0.270s - 1/1944 7208.83/s
success Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 1.490s - 2/2 1.34/s
success onPreExtractQueries - 0.005s
success extract queries from components - 1.922s
success write out requires - 0.336s
warn ./node_modules/@reach/auto-id/dist/reach-auto-id.esm.js
Attempted import error: 'useId' is not exported from 'react' (imported as 'useId$1').
warn ./node_modules/@reach/auto-id/dist/reach-auto-id.esm.js
Attempted import error: 'useId' is not exported from 'react' (imported as 'useId$1').
success Re-building development bundle - 7.402s
success Writing page-data.json files to public directory - 0.299s - 0/1943 6494.90/s
success onPreExtractQueries - 0.004s
success extract queries from components - 1.680s
success write out requires - 0.074s
success Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 19.698s - 2/2 0.10/s
warn ./node_modules/@reach/auto-id/dist/reach-auto-id.esm.js
Attempted import error: 'useId' is not exported from 'react' (imported as 'useId$1').
warn ./node_modules/@reach/auto-id/dist/reach-auto-id.esm.js
Attempted import error: 'useId' is not exported from 'react' (imported as 'useId$1').
success Re-building development bundle - 3.134s
success Writing page-data.json files to public directory - 0.617s - 0/1943 3148.99/s
success onPreExtractQueries - 0.004s
success extract queries from components - 1.712s
success write out requires - 0.044s
warn ./node_modules/@reach/auto-id/dist/reach-auto-id.esm.js
Attempted import error: 'useId' is not exported from 'react' (imported as 'useId$1').
warn ./node_modules/@reach/auto-id/dist/reach-auto-id.esm.js
Attempted import error: 'useId' is not exported from 'react' (imported as 'useId$1').
success Re-building development bundle - 1.960s
success Writing page-data.json files to public directory - 0.068s - 0/1943 28579.15/s
success onPreExtractQueries - 0.002s
success extract queries from components - 2.026s
success write out requires - 0.059s
warn ./node_modules/@reach/auto-id/dist/reach-auto-id.esm.js
Attempted import error: 'useId' is not exported from 'react' (imported as 'useId$1').
warn ./node_modules/@reach/auto-id/dist/reach-auto-id.esm.js
Attempted import error: 'useId' is not exported from 'react' (imported as 'useId$1').
success Re-building development bundle - 3.412s
success Writing page-data.json files to public directory - 0.267s - 0/1943 7284.06/s

Seems that fast-refresh is not that “fast” 😄 but more importantly it is very irregular since all the changes shown are the same. Just copy changes.

Reproduction Link

Hard to do

Steps to Reproduce

Can’t create minimal reproduction and i understand this is going to be hard to debug. I am willing to join a call and debug through OR getting some help on how to profile those steps to maybe understand what is going on. I just know that we upgraded to gatsby 4 and this started. I ve been debugging this for 2 days and can’t get to anything related to fast-refresh. Managed to improve only the cold and warm boots.

Expected Result

Fast refresh should be around 1 second

Actual Result

Fast refresh is at 1-7 seconds locally

Environment

Gatsby 4.16.0
node 16

Config Flags

PRESERVE_FILE_DOWNLOAD_CACHE: true, FAST_DEV: true, PARALLEL_SOURCING: true,

[oorestisime]

I doubt we are the only ones seeing the dev being so slow. And not sure what else to give as examples.

[shanghaikid]

success building schema - 0.388s
warn Your GraphQL query in createPages took 15.596 seconds which is an unexpectedly long time. See https://gatsby.dev/create-pages-performance for tips on how to improve this.
success createPages - 48.193s
success createPagesStatefully - 0.150s
info Total nodes: 7570, SitePage nodes: 2325 (use --verbose for breakdown)
success Checking for changed pages - 0.001s
success write out redirect data - 0.002s
success Build manifest and related icons - 0.034s
success onPostBootstrap - 0.037s
info bootstrap finished - 53.489s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.493s
success write out requires - 0.021s
success run static queries - 0.025s - 1/1 39.69/s
success run page queries - 50.986s - 3/3 0.06/s
success Running gatsby-plugin-sharp.IMAGE_PROCESSING jobs - 88.993s - 202/202 2.27/s
⠇ Building development bundle