Have you used React.Lazy and suspense but still not able to boost performance of your website in mobile devices.....Than.you are on right page to move forward
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} and `suspense} in React; however, this did not result in the anticipated improvement in your web performance score.
But why is it the case that lazy and suspense is not improving performance as expected for Mobile devices in 3G and 4G network Speed?
Given that something extra was needed for your production website.....
I was recently assigned a task to enhance the performance 🚀 of the production website for mobile users 📱. 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.
- First thing first that please install bundle analyzer plugin to give complete picture of bundles in repository.
In my case it was webpack bundle anlyzer(https://www.npmjs.com/package/webpack-bundle-analyzer) and i installed it to existing project `` plugin and attempted to analyze each piece after that. Following that, I had a lot of suggestions about how to enhance the performance.
What needs to be analyze once you install webpack bundle analyzer
- analyze all the larger bundles
- in my case main.js bundle was too large around 6 MB of Gzip size
- analyze any duplication of bundle is there or not?
- for me it was lodash.clonedeep and lodash both were available in main.js
- Are your vendor and polyfill package / chunks are separate? if not try to make it as separate chunks
Main.bundle.js
main bundle size was too big [around 6-7 MB Gzip] which is causing increasing downloading time along with parsing time.
That means in browser, js main thread was too busy in downloading and parsing the main js file. now i am started thinking about offloading some work from main thread so one obvious approach is that we should reduce main bundle size.
How to break the main bundle js file?
in my case mine main bundle has lot of json files, which is related to translations / localization which was increasing 1.5 MB of main bundle size.
Now, I did took away translations using lazy import from main.js bundle. This gives 40% performance score optimisation 🚀. but this not done yet since we hardly 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 json files. not all of those locales was used in our website. due to which we thought of replacing moment js with a lightweight library, but doing so will require more code modifications and increase my workload in testing the entire website and lead to more errors.
fortunately, a webpack plugin was already available. I was able to minimize the size of the moment.js file by utilizing that plugin [[ContextReplacementPlugin](https://webpack.js.org/plugins/context-replacement-plugin/ )]. this plugin removed a lot of unnecessary locales json files from final bundle. this reduce bundle gzip size by 0.5 MB
Reference Resources:
- https://www.npmjs.com/package/webpack-bundle-analyzer
- https://webpack.js.org/plugins/context-replacement-plugin/
- https://react.dev/reference/react/lazy
Stay tuned many more will about to come... Thank you
Top comments (0)