The purpose of this page is to offer more advice on how to handle the problem of performance optimization for production websites.

It appears that you attempted to divide the bundle chunks on the react production website using React.lazy} andsuspense} in React; however, this did not result in the anticipated improvement in your web performance score.

But why is it the case?

Given that something extra was needed for your production website.....

I was recently assigned a duty to enhance the performance of the production website. I initially thought that we should load each route more lazily, but I soon realised that this had already been done.

I had also begun to wonder what might come next.

I installed the webpack bundle anlyzer plugin and attempted to analyze each piece after that. Following that, I had a lot of suggestions about how to enhance the performance.

Main.bundle.js
main bundle size was too big which is causing increase in downloading time along with parsing time.

How to break the main.bundle.js?
in my case mine main bundle has lot of json which is related to translation which was increasing 1.5 MB of main bundle size.

I did took away translation using lazy import from main.js bundle. This gives 40% performance score optimisation. but this not done yet since we reached from lighthouse performance score 25 to 35 only.

then i started looking at other potential big files.

One of them is moment js, which has numerous locales that we weren't using for our website. Replacing moment js with a lightweight library is one way to fix this, but doing so will require more code modifications and increase my workload testing the entire website—something I hadn't done before—which could lead to more errors. then I made the decision to figure out how to get rid of those undesirable regions; fortunately, a webpack plugin was already available. I was able to minimize the size of the moment.js file by utilizing that plugin [ContextReplacementPlugin].

Stay tuned many more will about to come... Thank you