是否可以使用 System.import
实现嵌套的异步路由获取,因此应用程序只分为几个合理的块,而不是许多小块?
背景
我正在我的React应用程序中实现bundle拆分 . 最初我实现了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路径时,是否可以为所有三个加载包?
非常感谢
1 回答
我玩过并设法找到一个解决方案,可以将任何给定数量的子路由的get请求数减少到2 .
我得到这个结果的方法是向Route1引入一个索引组件
然后我创建了索引组件,其中包含所有子路由的导入,如下所示:
我也在Webpack中设置
minChunks:2
CommonsChunkPlugin
现在当我导航到Route1的任何子路由时,只加载了2个包:
Route1Index
包和包含所有进口的包