组合多个路由以编码拆分包

Question

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

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

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

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

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

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

Answer 1

为了满足我的所有 code-splitting 需求，我使用了 react-loadable。

您可能想尝试拆分每条路线。不需要伤害太多。 ~~但如果这太细化，您总是可以包装更高级别的路由组件。~~

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

组合多个路由以编码拆分包

Combine multiple routes to code split bundles

reactjs

webpack

code-splitting

create-react-app