Code Splitting

Implement routing-level code splitting with async loading with react-loadable.

Detailed documentation: https://github.com/jamiebuilds/react-loadable‚Äč

src/router.js
...
// Loadable component with Air UI Loader component
const loadable = loader =>
Loadable({
loader,
delay: false,
loading: () => <Loader />,
})
...
// routes config
const routes = [
// System Pages
{
path: '/system/login',
component: loadable(() => import('pages/system/login')),
exact: true,
},
...
]
...
// mapping routes config to routes
{routes.map(route => (
<Route
path={route.path}
component={route.component}
key={route.path}
exact={route.exact}
/>
))}