Performance Optimisation | Code splitting

[aadeshkulkarni]

Current

There are different routes in the app. However, React, by default, creates 1 script file which contains code for all routes. This causes performance issue since the size of the bundle is large.

Expectation

Each Route mentioned within App.tsx should be bundled separately. Use code-splitting / Dynamic imports to achieve this.

Stats

• Share before / after loading metrics (Lighthouse or something else)
• Share screenshot of dist folder after npm run build is executed.

Reference:

https://dev.to/franklin030601/code-splitting-in-react-js-4o2g

[debopriyobasu]

If this issue is not assigned to anyone yet, I can take this up. Here is how I plan to proceed:

• I plan to use lazy and Suspense from React
• import all the components dynamically using lazy
• wrap the Routes inside a Suspense, which would fallback to a Spinner component.
• create a Spinner component using tailwind.css and use that as a fallback. It would be centered across the screen.

I confirm that I have no active issues assigned to me currently.

[aadeshkulkarni]

Sounds good. Except that we already have a spinner component. You might want to check that out. Assigning it to you. Please record the before and after metrics to ensure the performance is really optimised.