Below is my code segment. I am using lazy loader to cut down the bundle size of my huge app. I am achieving this but in process of switching from one rote to another, lazy loader takes even more time to render. Below is sample of many routes i am hitting.
When i monitor the network, looks like the chunk is arriving but again taking many seconds to render on view
import React, { Suspense, lazy } from 'react'
import { Router, Route, Redirect, Switch } from 'react-router-dom'
import { history } from './store'
import Main from './pages/Main'
import Spinloader from './SpinLOader'
import Auth from './components/Auth'
const Reports = lazy(() => import('./pages/Reports'))
class App extends React.Component {
render() {
return (
<div>
<Router history={history}>
<Suspense fallback={<Spinloader/>}>
<Switch>
<Route path={'/:404_path'} key={'404'} component={NotFound} />
<Route
exact
path='/home/product/:id/one'
key={'4'}
component={Auth(Reports)}
/>
</Switch>
</Suspense>
</Router>
</div>
)
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ }, dispatch)
}
const mapStateToProps = (state) => {
return { }
}
export default Main(connect(mapStateToProps, mapDispatchToProps)(App))