Reducing main bundle size with React lazy
On one of our projects we were able to reduce main bundle size from ~1080kB to ~820kB only by lazy loading one library (recharts).
in router file
import React, {Component, lazy, Suspense} from 'react'
//other imports
const StatisticsComponent = lazy(() => import('./path/to/component'))
export class Root extends Component {
render(){
return(
<Router history={history}>
<Switch>
// other routes
<Suspense fallback={<div>Loading...</div>}>
<Route exact component={StatisticsComponent} path='/statistics' />
</Suspense>
</Switch>
</Router >
)
}
}
Tweet