Debugging slow rebuilds in develop mode

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

[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

[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.