react lazy loader takes too long to render

Viewed 155

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))
0 Answers
Related