angular 6多页应用程序如何答案

【问题标题】：angular 6 Multi-Page App How toangular 6多页应用程序如何
【发布时间】：2018-08-01 16:06:58
【问题描述】：

我正在开发一个复杂的信息系统，我们的前端堆栈被定义为使用 Angular 框架。我知道 Angular 是计划好的，主要适用于单页应用程序。但是在这个阶段，我面临着 Angular 6 支持 MPA 的问题。基本上，我们客户的要求是要查看系统中的某些元素，它必须在不同的选项卡中打开，因为通常人们会打开多个并使用它用于收集或比较彼此之间的元素。

我当前的应用程序分布在多个延迟加载的模块中，所以我的问题是为了解决这个问题，实现 MPA 对 Angular 的支持的最佳方法是什么？我知道如果我在单独的选项卡中打开一个链接，客户端必须下载整个应用程序，然后他才能查看特定页面。任何人都可以就这种情况的某些解决方案提出建议，或者是否可以不在新标签上下载整个应用程序？谢谢。

附言。我浏览了整个互联网，但没有找到任何解决方案。

【问题讨论】：

使用service workers怎么样？他们可以缓存js文件
如何不使用角度路由模块，而是使用 location.href 进行路由。
@PatrykBrejdak 关于如何使用服务工作者的任何实际示例？无论如何，如果打开一个新标签，整个应用程序将再次加载不是吗，或者我不明白什么？
@simplelenz 它有什么变化？我已经没有使用路由器进行导航，但打开一个选项卡，应用程序仍会再次加载

标签： javascript angular

【解决方案1】：

这些天我正在使用 Angular 开发一个多页应用程序。在那里，我们使用普通的 location.href 导航进行路由，而不是使用角度路由器模块。这样角度应用程序可以用作多页应用程序。当我们这样做时，每次我们重新加载浏览器时，角度引导所有内容并从应用程序组件开始加载。因此，当您使用延迟加载时，您可以限制每次浏览器刷新时加载的模块数量。当您在新标签页中打开某些内容时也会发生同样的情况。

正如@Suresh Kumar Ariya 所建议的，服务器端渲染只是渲染页面的静态内容，而该页面的动态功能所需的 javascript 文件在后台加载。所以我认为这不是您想要的，除非您只想快速提供静态内容以改善用户体验。

你可以做的是尝试做更多的延迟加载以最小化初始加载并优化你的代码

【讨论】：

感谢回复，其实我对服务人员并不熟悉，经过小研究我认为这适用于我的情况，因为在 AOT 编译后，新选项卡会在 2 秒内加载，所以我认为如果供应商和其他脚本将被缓存，新标签应该加载得非常快
是的，您所能做的就是使用优化技术来加快渲染速度。你也可以在构建时使用 --build-optimizer 标志
好的，谢谢??无论如何，在我实现这个之后，我会在这里更新有用的答案:)

【解决方案2】：

您也可以选择带有服务端渲染概念的 Angular。所以数据可以在客户端和服务器端共享。 https://angular.io/guide/universal

【讨论】：

嗨，Suresh，您以前尝试过完成此操作吗？对我的特殊情况有帮助吗？
我没有使用 Angular 处理过任何 SSR。您可以尝试使用一个用例创建示例项目。
我正在考虑这个，但还没有触及它。也可以说整个框架是专门为 SPA 设计的吗？如果我没记错的话，angularjs 能够轻松处理这个问题
Angular 框架是用现代 Web API 构建的，与 Angularjs1.x 相比具有更好的性能。有服务工作者支持。最后，它是一个平台，可用于创建适用于移动、桌面和通用的 Web 应用程序。

【解决方案3】：

感谢大家的建议，用service workers 解决了这个问题，现在所有标签都可以立即加载 =) 感谢@Patryk Brejdak

【讨论】：

很高兴听到这个消息:)，但是如果您能多描述一下解决方案会很棒，所以这个答案对于那些在类似问题上苦苦挣扎并且如果解决了也接受这个答案的其他人来说会更有价值你的问题。
实际上，我并没有做太多，只是简单地安装了服务人员，使用默认设置 ))) 并且正在打开一个新选项卡，它使用的是网站的缓存版本，这与我完全一样使用角度路由器打开页面。差不多就是这样。另一个需要优化的好处是使用前面建议的服务器端渲染来启动页面。