Code-Splitting in React

code-spliting in React

When we work on a large-scale project managing bundle is became a common problem. The browser needs to load the whole bundle then render data. To solve this issue code-splitting works like a gem.

Import(): Dynamic import load bundle when it needs to access. To separate it from the main bundle you can use import.

React.lazy and Suspense: You can control your elements busing lazy. The lazy will make web apps faster. Mainly, when you need the app element lazy will bring that element only that time. If it takes time you can use suspense as preloader content. You can add text or HTML elements as suspense.