react性能优化：react-loadable组件异步加载-踩坑

1.新建 LoadableComponnet.js

import React from 'react';

import Loadable from 'react-loadable';

import { isDevEvn } from '../utils/env' ;

const Loading = (props) => {

const { error } = props;

const isDev = isDevEvn;

if(error && isDev) {

return (

<div>

<p>{ error.stack ? error.stack : ''}</p>

</div>

)

}

return <div/>

}

const LoadableComponent = (loader, render) => {

const config = {

loader,

loading: Loading,

delay: 1000

}

if(render) {

config.render = render;

}

return Loadable(config)

}

export default LoadableComponent 

2. route.js

const Login = () => import('../views/login/Login');

const Index = () => (

<Switch>

<Route path="/" component={la(Login)}></Route>

</Switch>

)

export default Index;

注意： 引用的 Login组件采用，import语法引入。不可使用 import Login from '../views/login/Login'