Use react suspense and lazy to async loading component, support antd components. Thanks for react code splitting, loadable-components and react-loadable. If you want to do code-splitting in a server rendered app or require other features, please use the components mentioned above.
npm i react-lazyable
yarn add react-lazyable
import * as React from "react";
import { loadable } from "react-lazyable";
const LoadableComponent= loadable({
loader:() => import('./my-component')
})
export default class OtherComponent extends React.Component {
render(){
const props = {
prop1:'',
prop2:'',
};
const children = this.props.children;
return <LoadableComponent{...props}>{children}</LoadableComponent>
}
}
required.
lazyload({loader:() => import('react-component')})
lazyload({loader:() => import('./my-component')})
lazyload({
loader:() => import('react-component'),
loading:() => <loading/>
})
lazyload({
loader:() => import('react-component'),
delay:1000
})
lazyload({
loader:() => import('react-component'),
export:(d) => d.wantExport || d.default
})
If you want to get ref manually, set forwardRef to true.
Set component's identifier name.
The option using for antd component static propertise, use babel-plugin-import-antd-async for it.