npm install @babel/plugin-syntax-dynamic-import

package.json配置

  "babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ],
      "syntax-dynamic-import"
    ]
  },

jsx中的代码

import Loadable from 'react-loadable';

const loading = () => <div>加载中---</div>
const LoadableIndex = Loadable({
    loader: () => import('./page/index'),
    loading: loading
})

const loading2 = () => <div>loading---111</div>
const LoadableIndex2 = Loadable({
    loader: () => import('./page/two'),
    loading: loading2
})

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route path="/two" component={LoadableIndex2} />
            <Route path="/" component={LoadableIndex} />
        </Switch>
    </BrowserRouter>,
document.getElementById('root'));

封装

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

const loadingC = () => <div>加载中---</div>

export default (loader, loading = loadingC) => {
    return Loadable({
        loader,
        loading
    })
}

调用

const Index = loadable(() => import('./page/index'))
const Two = loadable(() => import('./page/two'))

ReactDOM.render(
    <BrowserRouter>
        <Switch>
            <Route path="/two" component={Two} />
            <Route path="/" component={Index} />
        </Switch>
    </BrowserRouter>,
document.getElementById('root'));