Code Spliting

Code-splitting is the process of taking one large bundle containing your entire app, and splitting them up into multiple smaller bundles which contain separate parts of your app. You can think of code splitting as incrementally downloading the app.

We are using React.lazy in order to split the code.

React.lazy

The React.lazy function lets you render a dynamic import as a regular component. E.g. Before code splitting:

import DefaultDashboard from './views/dashboards/Default';
<DefaultDashboard />

After code splitting:

const DefaultDashboard = React.lazy(() => import('./views/dashboards/Default'));
<DefaultDashboard />

Note that, currently all the views (pages) components are loaded lazily using React.lazy.