Problem
Build times increased from ~2 mins to ~30 mins.
Solution
Investigating the root cause...
- Commenting out
createPages
in gatsby-node.js reduces build times from ~30 mins to ~2 mins - Commenting out most of
icon-page.js
reduces build times from ~30 mins to ~2 mins. What part oficon-page.js
is slowing down builds? I wonder if it's related to styled-components. - Uncommenting a few components in
icon-page.js
increased the build time from ~2 mins to >6 mins (still running). Why doesicon-page.js
take so long to build in this repo but not in primer/octicons? - Differences between primer/design and primer/octicons:
-
react
version (design: v17, octicons: v16) -
@primer/react
version (design: v35, octicons: v30) -
gatsby
version (design: v3, octicons: v2) - Number of nav items
-
- Rendering the
Sidebar
component inicon-page.js
increased build times from ~3 mins to 38 mins. What's causing Sidebar to take so long to render? - Rendering
Sidebar
withoutNavItems
fixed the build time. What's causing NavItems to take so long to render? - Rendering
NavItems
with an empty array instead of the contents ofnav.yml
doesn't spike build times. Are the contents ofnav.yml
too big? - Rendering about half the amount of nav items, reduces the long build time by about half. This seems like the root cause of the long build times, but I'm unsure how to fix it.
- Not rendering a
NavList
inside theNavItems
component fixes the build time. Could it be a styled-components issue? - NavList.Items inside NavList.SubNav seem to be causing the issue https://github.com/primer/design/pull/390/commits/deb384f28bdbf4e371dc67160ffe60923ccfe2a3