微前端，使用 Angular 框架作为外部答案

【问题标题】：Micro Frontends, Using angular framework as externals微前端，使用 Angular 框架作为外部
【发布时间】：2019-01-08 00:14:55
【问题描述】：

我们正在尝试将一个大型前端应用程序 (app.mydomain.com) 拆分为 2 个较小的应用程序

登录前应用程序 (prelogin.mydomain.com) - 这包括用户登录之前的所有内容
登录后应用程序 (postlogin.mydomain.com) - 这包括用户登录后的所有内容

这两个应用程序都使用当前与其他 java 脚本文件捆绑在一起的 angular 框架。由于 Angular 框架的尺寸相当大，这会增加包的大小，从而影响前端页面加载性能。

由于这两个微应用程序都使用 angular 框架，我们不想第二次重新加载 angular（当用户从登录前切换到登录后）。相反，我们希望从第三个域（third.mydomain.com）加载 angular 作为外部脚本并将其缓存在浏览器中以供将来使用。因此，当用户从 prelogin 切换到 postlogin 时，将使用来自浏览器的缓存 angular bundle，而不是再次加载 bundle。

我在官方 Angular 文档中找不到任何关于在 HTML 中加载 Angular（作为外部脚本）的内容。这是角度支持的东西吗？ angular 是否提供 UMD 模块？

【问题讨论】：

标签： angular

【解决方案1】：

您似乎可以使用System JS 设置来完成此操作：https://jsfiddle.net/angulartypescript/n305zyya/

但是，我不确定它对已经使用 CLI 搭建的项目的效果如何。

以某种方式将这些项目捆绑在一起会不会更容易？这样你就不会对像角核心这样的大包发出任何网络请求。我从事过一些项目，其中一个 Angular 项目像库一样被捆绑并导入到另一个项目中。也许这会在这里工作？

【讨论】：

我同意您应该尝试将其作为一个项目...您是否通过拆分来寻找特定的用例？
@MyCah - 这是业务需求。我们可能需要为多个登录后应用程序使用相同的登录前应用程序。它与accounts.google.com 相同，用于对calendar.google.com 和mail.google.com 进行身份验证
@ManavManocha 在这种情况下，我只会在两个应用程序中都保留 Angular，它并没有那么大，而且您不必通过为其发出网络请求来减少太多开销，即使它已被缓存。我已经用 Angular 制作了很多应用程序，而且没有一个仅仅因为 Angular 的大小而导致性能不佳。
@MyCah- 我更关心角度依赖，例如RxJS 和 Zone.js 的大小相当大。你怎么看？
我认为您仍然可以，特别是如果您只能导入 rxjs 所需的内容，那么您的包不应最终使用整个库。您也可以，如果预登录应用程序足够简单，只需使用一些较小的框架（如 Vue），然后使用 Angular 进行更复杂的登录后。