Reactjs 在React中，如何对拆分公共页面（例如登录）进行编码，以将其与安全页面分开？

我有一个react应用程序，它有可公开访问的页面（登录、忘记密码等）和安全页面（用户登录后）。我想使用代码拆分，这样不登录但访问公共可访问页面的用户只能获得公共页面的代码，而不能获得安全页面的代码

这是为了减少用户最初需要下载的包的大小，并确保从未通过登录页面的用户看不到任何与安全页面相关的代码

我为每个路由实现了代码拆分，这很有效，但这意味着每次用户进入新页面时，用户都必须等待加载该页面的代码——这不是一个很好的用户体验。相反，我希望在用户成功登录后下载所有安全页面的代码

---

有没有办法将代码分组在一起？或者将路由分组在一起？

能否将安全组件包装在容器组件中，并根据路径呈现容器，然后在内部下载代码段并根据需要呈现安全组件

<Switch>
   <Route path='/login' to{<Login />} />
   <Route path='/secure' to={<Secure />} />
</Switch>

---

然后在组件内部，下载安全代码库并使用

内部的另一个

路由到每个安全页面。

在这种情况下，您需要创建两个不同的应用程序

否则，无论用户访问哪个页面，单页面应用程序构建都将在任何url加载上发送所有文件

即使您将代码分组，也无所谓，因为捆绑的js将以任何方式发送

将单个页面拆分为子应用程序会更好。然后你只需要相应地处理和服务

另一个选择是服务器端渲染，如果您对它感到满意，就给它拍照