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?

In React Apps Everything is bundled. File budling is the process of merging and importing all files into one single file. For budling, files React using Webpack.

Now comes the question of why bundling the files?

Bundling your files helps in optimization and reduces the time it takes for your page to load because the browser doesn’t have to run separate files while loading the web app.

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.

1. While using the Lazy() suspense component is a must.

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