react-loadable的使用 实现react组件异步加载和代码分割

知识点：

1. import * from '' 同步执行。
2. import(相对路径) 异步执行，返回Promise对象 自动 code-splitting(代码分割)

// 安装react-loadable 插件


import React from 'react';
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
import Loadable from 'react-loadable';
import App from './App.js'; 
import Admin from './admin';
import Nomatch from './pages/nomatch/404';
import Home from './pages/home';

// 按路由拆分代码
const MyLoadingComponent = ({ isLoading, error }) => {
    if (isLoading) {
        return '加载中...'
    }
    else if (error) {
        return '页面出错了。。。';
    }
    else {
        return null;
    }
};

 
const BaseParts = Loadable({
    loader: () => import('./pages/baseParts'),
    loading: MyLoadingComponent
});

    

class Routers extends React.Component {

    render() {
        return (
            
                
                     
                         
                                  
                                     
                                    
                                    
                                 
                        }>
                    
                
            
        )
    }
}

export default Routers;