React loadable 按需加载个人使用记录

包需要 install

babel-plugin-syntax-dynamic-import

webpack.config的babelrc需要在plugins里添加

"syntax-dynamic-import"

快捷使用，封装成组件

import React from 'react';
import Loadable from 'react-loadable';

import {Row, Col,Card} from 'antd';
// 按需加载组件
export default function withLoadable (comp) {
    return Loadable({
        loader:comp,
        loading:(props)=>{
            if (props.error) {
                return <Card style={{width:"100%",height:"100%"}} >
                    加载错误。请刷新
                </Card>;
            } else if (props.timedOut) {
                return <Card style={{width:"100%",height:"100%"}} >
                    加载超时。请刷新
                </Card>;
            } else if (props.pastDelay) {
                return <Card loading={true} style={{width:"100%",height:"100%"}} />;
            } else {
                return null;
            }
        },
        timeout:10000
    })
}

组件使用方法，可以将原先导入的组件变为按需加载的组件

import React from 'react';
import {connect} from 'react-redux';
// import Main from './main'
// import Info from './info'
// import Add from './add'
import {HashRouter, BrowserRouter, Route, NavLink, Switch, Redirect, withRouter} from 'react-router-dom';

import Loadable from '../../../commom/loadable';

const Main = Loadable(() => import('./main'));
const Info = Loadable(() => import('./info'));
const Add = Loadable(() => import('./add'));

export default () => {
    return (
        <Switch>
            <Route path="/high/manager/" exact component={Main}/>
            <Route path="/high/manager/info" exact component={Info}/>
            <Route path="/high/manager/add" exact component={Add}/>
        </Switch>
    );
}

拆分的js文件，这拆分效率也太高了8！！！还不用修改任何配置！

之前遇到的问题：

一开始在顶层路由使用，发现某些路由使用组件并编译后并没有生成拆分的代码包，因为不了解原理，后来根据loadable高价组件的基于组件的按需加载思想，将按需加载组件置于相对更底层的组件中，发现成功生成对应拆分的代码包。