Allow production build to be profiled using React Dev Tools

[nkuehn]

The current production build has a different structure than the dvelopment server, which makes it hard to analyze client-side production performance issues exactly.

Let's introduce a flag or env var or just comment in / out place to enable building gatsby production with React Profiling information.

Resources:

• https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a3977#react-dom1702--scheduler0202
• https://webpack.js.org/configuration/resolve/#resolvealias (the webpack config used there)
• https://github.com/commercetools/commercetools-docs-kit/blob/main/packages/gatsby-theme-docs/gatsby-node.mjs#L699-L703 (this is where we would add enriching the alias config as described in the link above)
• https://github.com/commercetools/commercetools-docs-kit/blob/main/packages/gatsby-theme-docs/gatsby-node.mjs#L657 ("devtools" would also have to be enabled in general again)
• https://react.dev/learn/react-developer-tools (general documentation of the react dev tools).
• If all above does not yield a build that makes the react devtools profiler work, try explicitly profiling certain components (e.g. in the page layout) https://react.dev/reference/react/Profiler - but it would require analyzing the data programmatically.

[timonrey]

Conclusion after investing 20mins into it, adjusting the webpack config and enabling the devtools: The production build still does not show react profiling information.