Gatsby: Debugging slow rebuilds in develop mode

[zslabs]

Summary

I have a decent-sized site; about 360 pages (95% being generated from markdown-driven content) that has its styling underpinnings running through Emotion. Hooks a plenty (useStaticQuery from Gatsby, useTheme from Emotion) and all that jazz. While our production site is as fast as ever, local development can be a real drag sometimes, with reloads taking between 6-10 seconds and the site feeling overall a bit sluggish to respond to even simple things like browser resizes. GraphQL queries are running around 40/sec.

I've seen a lot of posts about debugging slow production builds, and a few around slow queries like https://github.com/gatsbyjs/gatsby/issues/11426 but would love to know some general tips that I could use to figure out what's going on. If there's a doc page already, then 🎉 but otherwise, if we do have a list, it may be useful to add for others that face a similar issue.

Environment (if relevant)

  System:
    OS: macOS 10.15.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 3.0.0 - /usr/local/bin/fish
  Binaries:
    Node: 12.14.1 - /usr/local/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.13.6 - ~/.npm-packages/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 72.0.1
    Safari: 13.0.4
  npmPackages:
    gatsby: 2.19.1 => 2.19.1
    gatsby-plugin-canonical-urls: 2.1.19 => 2.1.19
    gatsby-plugin-catch-links: 2.1.24 => 2.1.24
    gatsby-plugin-compile-es6-packages: 2.1.0 => 2.1.0
    gatsby-plugin-emotion: 4.1.21 => 4.1.21
    gatsby-plugin-feed: 2.3.26 => 2.3.26
    gatsby-plugin-google-tagmanager: 2.1.24 => 2.1.24
    gatsby-plugin-manifest: 2.2.37 => 2.2.37
    gatsby-plugin-netlify: 2.1.31 => 2.1.31
    gatsby-plugin-netlify-cms: 4.1.37 => 4.1.37
    gatsby-plugin-react-helmet: 3.1.21 => 3.1.21
    gatsby-plugin-sitemap: 2.2.25 => 2.2.25
    gatsby-remark-autolink-headers: 2.1.23 => 2.1.23
    gatsby-remark-custom-blocks: 2.1.24 => 2.1.24
    gatsby-remark-embed-gist: 1.1.9 => 1.1.9
    gatsby-remark-embed-video: 2.0.1 => 2.0.1
    gatsby-remark-prismjs: 3.3.30 => 3.3.30
    gatsby-remark-relative-links: 0.0.3 => 0.0.3
    gatsby-remark-responsive-iframe: 2.2.31 => 2.2.31
    gatsby-source-filesystem: 2.1.46 => 2.1.46
    gatsby-transformer-remark: 2.6.48 => 2.6.48
  npmGlobalPackages:
    gatsby-cli: 2.8.26

[KyleAMathews]

Can you share your site? This isn't normally the case even for much larger sites so it's likely you're hitting an edge case of some sort. It'll be hard to debug without examining it directly.

[zslabs]

@KyleAMathews Appreciate the response! This is of course one of those "private repo" situations, which does make things a bit difficult to share here. Is there another route we could potentially take?

[KyleAMathews]

Can you share it directly with one of us?

Otherwise this isn't a known problem so we don't know how to help.

Another option is to create a reproduction that we can play with https://www.gatsbyjs.org/contributing/how-to-make-a-reproducible-test-case/

[zslabs]

Sure, providing access to one of you would be great! Let me reach out to the powers that be to confirm the best way to make that happen. Should I tag you or someone else once we're ready to go with that?

[sidharthachatterjee]

@zslabs Feel free to invite me and tag me in here once you've done so!

[zslabs]

@sidharthachatterjee Did you have an email I could reach out to you at by chance?

[TylerBarnes]

@sidharthachatterjee @zslabs just wanted to note that I've seen a similar issue before and in my case the problem was that emotion was loading a ton of source maps. If I remember correctly I turned source maps off for that project and it sped up the develop load 100x.

[zslabs]

@TylerBarnes You are an absolute hero! 💪 Turning off sourcemaps in develop mode 100% did the trick. Thank you so much for the tip!

Thanks @KyleAMathews and @sidharthachatterjee for the super-fast responses to this one. I know it can be quite difficult to help debug all the different types of crazy things we're building out there on the web, but sincerely appreciate you being willing to help debug. Hopefully this can help someone else in the future.

I'll try to follow up with the Emotion team to see if there's anything we can do there; or if this is something we can all work on together between the two projects to help ease potential frustrations in the future.

[tkh44]

I've been noticing and seeing reports or larger projects experiencing negative effects of having source maps enabled when using emotion. I think its just the sheer amount of additional content generated. I've been leaning towards recommending disabling sourcemaps by default in emotion 11.

cc @mitchellhamilton