Not Seeing Perf Gains on Create-React-App after using React.lazy

I’m currently working with a team maintaining a react-app that’s seeing a decent amount of bloat.

I was sure that bringing in React.lazy in and doing some Route-splitting would yield some great performance gains. However when I run lighthouse, I see absolutely no difference in the page load speed. The Routes that I am splitting off from the bundles are by far the largest portion of the app.

Is there something I’m missing here? We’re using create-react-app, so the docs so I don’t have to make any changes to the webpack config I’m following the pattern outlined in the React docs exactly, using the dynamic import.

Could it be something to do with browser caching?

Or do the bundles not really split until the production build (even though I see separate bundles in the network tab)?

It’s really hard to find a good detailed answer to this, so any help is greatly appreciated. I’m pretty stuck.

Source: Ask Javascript Questions

LEAVE A COMMENT