是否可以使用System.import
实现嵌套异步路由获取,因此应用程序只分为几个合理的块,而不是许多小块?
我在我的React应用程序中实现捆绑拆分的过程。 最初我实现了bundle-loader(我无法在所有情况下都能工作),然后使用System.import,我发现它的行为更加可预测。
代码分割在路由的基础上工作得很好,但是,它产生了许多小捆绑,并且额外捆绑和获取的开销是不必要和浪费的。
作为一个例子,我有这个代码,当你导航到他们的页面时加载仪表板,设置或图像的包:
<Provider store={store}>
<Router history={browserHistory}>
<Route path='/' component={Container}>
<IndexRedirect to="Login" />
<Route path='Registration' component={RegistrationContainer} />
<Route path='Login' component={LoginContainer} />
<Route path='Route1' >
<IndexRedirect to="Dashboard" />
<Route path='Settings'
getComponent={ (loc, cb)=> {System.import('./components/Route1/Settings')
.then(loadRoute(cb))
.catch(errorLoading); }}/>
<Route path='Dashboard'
getComponent={ (loc, cb)=> {System.import('./components/Route1/Dashboard')
.then(loadRoute(cb))
.catch(errorLoading); }}
/>
<Route path='Images'
getComponent={ (loc, cb)=> {System.import('./components/Route1/Images')
.then(loadRoute(cb))
.catch(errorLoading); }}
/>
</Router>
</Provider>
首次导航到Route1路径时,是否可以加载所有三个捆绑包?
非常感谢
答案 0 :(得分:2)
我玩过并设法找到一个解决方案,将任何给定数量的子路由的get请求数减少到2个。
我得到这个结果的方法是向Route1引入一个索引组件
<Route path='Patient' getComponent={ (loc, cb)=> {System.import('./components/Route1Index')
.then(loadRoute(cb))
.catch(errorLoading); }}>
然后我创建了索引组件,其中包含所有子路由的导入,如下所示:
import React from 'react';
// Child route components
import Settings from './Settings';
import Dashboard from './Dashboard';
import Images from './Images';
export default (props) =>(
<div>
{props.children}
</div>
)
我还在Webpack minChunks:2
CommonsChunkPlugin
现在,当我导航到Route1的任何子路径时,只加载了2个包:Route1Index
包和包含所有导入的包