Why Coding Splitting In React Apps

Code splitting helps in Increasing the Efficiency of the App by reducing the loading time of the browers

First of all why code-splitting?

Now comes the question of why bundling the files?

Okay, then Bundling helps the browsers to run the App fast then why code splitting.

Bundling helps React App to load Pages fastly but lets make it even more faster.

Coming to the point while starting the react app entire app bundle gets loaded for the first time this doesn’t affect the small application but a bigger application where some third-party libraries are also present in the same bundle loads which makes the App slow to avoid this code splitting can be done.

React has a function call “React.lazy()” that makes it possible to render dynamic imports as regular components.

2. Suspense is nothing but the component that accepts a fallback prop that can be rendered while your component is still loading and this can easily be achieved by wrapping your lazy-loaded components

Refer to this video for a better understanding