React loadable

#1

为什么第一种写法,react loadable 起作用,而第二种写法就不能起到代码分离的作用?

第一种写法:

const LoadableXmap = Loadable({
    loader: () => import('@/components/xmap/demo'),
    loading: Loading,
})
const LoadableLearnRedux = Loadable({
    loader: () => import('@/view/learnRedux/index'),
    loading: Loading,
})
const LoadableHome = Loadable({
    loader: () => import('@/view/home/index'),
    loading: Loading,
})
const App = () => {
    return <Router>
        <div>
        <Switch>
            <Route exact path="/" component={LoadableHome} />
            {/* <Route path="/map" component={LoadableXmap} /> */}
            <Route path="/map" component={LoadableXmap} />
            <Route path="/learn" component={LoadableLearnRedux} />
            
        </Switch>
        </div>
    </Router>
}
export default App

webpack 跑出来的效果:

            Asset       Size   Chunks             Chunk Names
       runtime.js   80.8 KiB  runtime  [emitted]  runtime
vendors.bundle.js   4.23 MiB  vendors  [emitted]  vendors
      0.bundle.js   14.9 KiB        0  [emitted]
      1.bundle.js   42.1 KiB        1  [emitted]
      2.bundle.js     27 KiB        2  [emitted]
    app.bundle.js   1.49 MiB      app  [emitted]  app
       index.html  696 bytes           [emitted]
Entrypoint app = runtime.js vendors.bundle.js app.bundle.js

第二种写法:

import  {LoadableXmap, LoadableLearnRedux, LoadableHome} from './index'
const App = () => {
    return <Router>
        <div>
        <Switch>
            <Route exact path="/" component={LoadableHome} />
            {/* <Route path="/map" component={LoadableXmap} /> */}
            <Route path="/map" component={LoadableXmap} />
            <Route path="/learn" component={LoadableLearnRedux} />
            
        </Switch>
        </div>
    </Router>
}
export default App

webpack 跑出来的效果:

Built at: 2018-08-13 12:56:57
            Asset       Size   Chunks             Chunk Names
    app.bundle.js   1.57 MiB      app  [emitted]  app
       runtime.js   74.3 KiB  runtime  [emitted]  runtime
vendors.bundle.js   4.23 MiB  vendors  [emitted]  vendors
       index.html  696 bytes           [emitted]
Entrypoint app = runtime.js vendors.bundle.js app.bundle.js
#2

react-loadable用来实现动态加载js脚本的,而第二种方式并没有实现动态加载,可以看一下webpack的文档怎么实现动态加载

链接:https://webpack.docschina.org/guides/code-splitting/#动态导入-dynamic-imports-