为什么第一种写法,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