将多个路由组合到代码拆分包中答案

【问题标题】：Combine multiple routes to code split bundles将多个路由组合到代码拆分包中
【发布时间】：2018-02-18 16:58:42
【问题描述】：

在我的 create-react-app (CRA) 应用程序中，我可以按照官方指南 https://reactjs.org/docs/code-splitting.html#route-based-code-splitting 轻松设置基于路由的代码分割

现在我可以将每条路由分成自己的 JS 块，但我宁愿创建 2 个不同的包（一个用于我主页的公共区域，一个用于登录用户的所有页面）。

如何将我的应用程序分成这两个包？（我还在用 react-router v3）

编辑：我的路线设置如下：

<Route
    path="/onepage/:id"
    component={RequireAuth(props => <Component1 {...props} />)}
/>
<Route
    path="/anotherpage"
    component={RequireAuth(props => <Component2 {...props} />)}
/>

是否可以将它们包装在更高级别的路由中（不改变路径本身）？

【问题讨论】：

标签： reactjs webpack create-react-app code-splitting

【解决方案1】：

对于我所有的代码拆分需求，我使用了react-loadable。

您可能想尝试只拆分每条路线。不需要太疼。 ~~但如果过于细化，你总是可以包装更高级别的 Route 组件。~~

我刚刚意识到这实际上行不通。在 React Router v3 中，路由实际上并不是组件，只是配置。因此，您唯一的好选择是包装所有页面级组件。

【讨论】：

更高级别的 Route 组件可以工作。我在原始问题中添加了两条示例路线。你能告诉我怎么包装吗？
编辑了我的答案。在 v3 中，Route 不是您可以渲染的真实组件。所以你不能用react-loadable（或任何其他动态导入`）包装它们