Improve React App Performance - Intro-[ Part 1 ]

In this series of blog post, I will be sharing the experience of how we improved the frontend react single page application performance.

Transitioning to React 🧑‍💻🧑‍💻 🧑‍💻 ⚛️
We were revamping our SaaS product's frontend from AngularJS to React. The focus was adding new features and delivering fast. Over time we have added 100's of new React components. State management was done using Redux + Redux Saga.

Make it Faster 🏇
Next goal is Web app should load fast in order to keep the user’s attention, keep them engaged and deliver a positive experience. the experience should be consistent in mobile or over slow internet.

Huge bundle size 🏋️‍♂️
After Looking at chrome coverage tool and GTMatrix report, we confirmed that we are serving huge JS bundle.Though it’s not being run, this JavaScript code will still be parsed and evaluated, which takes time.

• Around 70% of code 🧳 is unused while loading the page.

• it taking noticeable time for initial page rendering

Fruits of Efforts
bunch of developers started working on it and we saw early bearing fruits for the efforts

How We Solved It 🦸🦸

• The solution for that problem is to split up the application into multiple JS chunks and load them on demand aka Code Splitting (🔪)
• One can think of code splitting as incrementally downloading the app.

I will be sharing the detailed information about how we achieved it in following subsequent posts

• Improve React App Performance - Redux/Saga Code Splitting-[ Part 2 ]
• WebPack Optimisation-[ Part 3 ]
• Bundle Analysis & Keep Bundle In Check -[ Part 4]

so don't forget to follow & share in your network if you are interested in frontend optimisation.