export default function asyncComponent(importComponent){
class AsynccComponent extends React.Component{
constructor(props){
super(props);
this.state = {
component:null
}
}
async componentDidMount(){
const {default:component } = await importComponent();
this.setState({
component:component
});
}
render(){
const C = this.state.component;
return C ? <C {...this.props}/>: <ActivityIndicator
toast
text="加载中..."
animating={true}
/>;
}
}
return AsynccComponent
}
ActivityIndicator是加载动画
在引入路由组件的时候,按照以下格式引入
const AppealChangeBindPhone = asyncComponent( () => import( './user/components/user/UserCenter/set/changeBindPhone/AppealChangeBindPhone'));
这里按需加载后,放到服务器后有时会出现页面未加载出来时候的白屏问题。控制台会报Loading chunk 28 faild错误。根据分析应该是DNS劫持的问题。
解决方案是加https。