在 React 中实现嵌套的异步路由获取

Question

是否可以通过System.import实现嵌套的异步路由抓取，这样一个应用程序只被分成几个合理的块，而不是许多小块？

背景

我正在我的 React 应用程序中实施捆绑拆分。最初我实现了 bundle-loader（我无法在所有情况下工作）然后使用 System.import，我发现它的行为更可预测。

问题

代码拆分在逐个路由的基础上工作得很好，但是，它会产生许多小包，并且额外的包和 get 的开销是不必要的和浪费的。

例如，我有这段代码，当您导航到它们的页面时，它会加载仪表板、设置或图像的包：

    <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 路径时是否可以加载所有三个包？

非常感谢

Answer 1

我试过并设法找到了一个解决方案，可以将任何给定数量的子路由的 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:2CommonsChunkPlugin

现在，当我导航到 Route1 的任何子路由时，只有 2 个包被加载：Route1Index 包和包含它所有导入的包

在 React 中实现嵌套的异步路由获取

Implement nested async route fetching in React

reactjs

webpack

react-router

code-splitting

背景

问题