get-component-async

load component async for react router

Use

install by:

npm i -S get-component-async

For react router

import getComponentAsync from "get-component-async";
 
<HashRouter>
  <Route
    path="/sub"
    component={getComponentAsync(
      // webpack code split
      () => import("./sub")
    )}
  />
</HashRouter>;

./sub is code is:

export default class Sub extends Component {
  render() {
    return <div>sub</div>;
  }
}

For big component

import { getElementAsync } from "get-component-async";
 
<div>
  ...others
  {getElementAsync(() => import("./bigComponent"))}
</div>;

Show loading before loaded

import { getElementAsync } from "get-component-async";
 
<div>
  ...others
  {getElementAsync(() => import("./bigComponent"), <Loading />, props)}
</div>;

Set default loading before loaded

import { setDefaultLoading } from "get-component-async";
 
setDefaultLoading(<Loading />);