Poor react performance with the Components resolver

Hi,

I have migrated my company’s website to Storyblok + Gatsby, and I am finding it incredible.
There’s only one thing that keeps me up at night: Time to Interactive!
I was doing some investigation regarding this, and I think I came across what I think is the culprit.
So, I have based the project on the Storyblok + Gatsby boilerplate, and there there is a Components.js file, that takes a string, and returns the appropriate component. However, this file imports all the components (which in my project, there’s a lot). And when you import this file into all the other components also, considering components are nested several levels deep, I believe is making the processing time take a long time.
Do you guys have any idea on how to optimize this, or put me in the right direction for a different approach?
My components file is https://gist.github.com/jondujaka/3979c8ddadb7dafad89b740a9a83fb4d
And an example of how I use it:
{props.blok.header.map(item => {
return React.createElement(
Components(item.component),
{
key: item._uid,
blok: item
}
);
})}

Hi, I think this is not Storyblok specific issue, but more Gatsby/React. Anyway I took a quick look and I think this article could help you https://dev.to/itmayziii/better-performance-using-dynamic-code-splitting-in-gatsby-with-loadable-components-6am - check the part Implementing Loadable Components in Gatsby. Let me know, if it helped you.