a simple react async component which implements dynamic import syntax to add code spliting to the project"
npm install react-asynchronous-componentreact-asynchronous-component resolves component asynchronously with the support for code-spliting.
react-asynchronous-component gives you power to split your bundles into small chunks with webpack and lazy load them,
this reduces the cost of initial JS to be downloaded. for big projects its ideal to use code-spliting because the
bundle size increases and a lot of useless javascript is download which really is not required for the first render.
npm install react-asynchronous-componentLoadingComponent until your component is resolved.ErrorComponent if your component resolution fails.lets say you have a Home component which has a lot of content and assets in it.
``
export default function Home() {
return hell home
}
`
or
const Home = () => hello home
`
to implement async rendering and code spliting for home component
`
import React from 'react';
import Async from 'react-asynchronous-component';
const AsyncHome = (props) => (
loader={()=>
loading
}sime error occured
}// loader and error expect a react component or simple string.
class App extends React.Component {
render() {
return (
best usecase
in your react router you can convert all routing components to async components
which makes each route a chunk. saves a lot of initial load time.
import React from 'react';
import PropTypes from 'prop-types';
import { Switch, withRouter, Redirect, Route } from 'react-router-dom';
import Async from 'react-asynchronous-component';const AsyncHome = props => (
load={import('./Home.component' / webpackChunkName: "home" /)}
loading="loading...."
error="error...."
/>
);
const AsyncProfile = props => (
load={import('./Profile.component' / webpackChunkName: "profile" /)}
loading={()=>
loading....
}"
error={()=>Error....
}
/>
);
const AsyncErrorPage = props => (
load={import('./ErrorPage.component' / webpackChunkName: "errorpage" /)}
loading="loading...."
error="error...."
/>
);const Routes = () => (
/error/not-found} />
);
export default withRouter(Routes);