如何在运行时加载 Web 应用程序？答案

【问题标题】：How to load web applications on runtime?如何在运行时加载 Web 应用程序？
【发布时间】：2021-07-23 13:22:16
【问题描述】：

在过去的几天里，我正在研究微前端的概念。在微前端中，我们为所有应用程序创建 bundles，其中每个包代表一个单独的 Web 应用程序，最后我们在 base 应用程序中编写与这些包通信的逻辑。

例如，假设我们有 APP 1、APP 2 和 APP 3 是我们捆绑并在 BASE APP 中使用的微前端。

有没有什么方法可以在运行时动态加载这些应用程序，而无需创建单个应用程序包？

我知道我们可以使用 iFrame，但它不允许跨域访问 iFrame

【问题讨论】：

这在很大程度上取决于上下文。加载一个应用程序，可以像动态添加脚本元素到网页一样简单，也可以像计算共享组件、生命周期事件、通信协议等一样复杂。跨域问题（以及其他安全机制，如 CSP）当然很重要，但你真的需要跨越起源吗？你用“角度”标记了你的问题——我们应该假设所有应用程序都是我们吗？或者只是 Angular 中的基础应用程序和子应用程序使用不同的设置？应用程序是如何构建的？什么服务于 HTML 页面，编译后的 JavaScript 托管在哪里？
这只是冰山一角。如果您从一个新项目开始，请不要从微前端开始。如果您想优化代码交付，只需使用代码拆分或其他一些技术。如果你真的需要微前端（我能想到的唯一原因是多个团队处理相同代码的组织复杂性——任何其他原因都很难证明复杂性或性能影响是合理的）。查看该想法的创始人之一 Cam Jackson 的广泛介绍文章：martinfowler.com/articles/micro-frontends.html。包括捆绑和装载。

标签： javascript angular iframe runtime micro-frontend

【解决方案1】：

他们可以帮助解决这个问题的东西很少，最了解的是 Single SPA，它允许您将它们全部加载到同一个页面中，而无需使用 iFrame。

https://single-spa.js.org

如果您想使用 iFrame，则必须使用 PostMessageAPI 在它们之间进行通信以解决跨域问题。

还有其他选项，Martin fowler 在 2019 年写了一篇关于这些选项的概述，这将比我在这里添加的任何内容都更有用。

https://martinfowler.com/articles/micro-frontends.html#IntegrationApproaches

【讨论】：

【解决方案2】：

我认为这个资源应该对你更有帮助：

https://www.angulararchitects.io/en/aktuelles/the-microfrontend-revolution-part-2-module-federation-with-angular/

这里的关键搜索词是“Angular Module Federation”，我认为它是在版本 11 中引入的，因为它能够在运行时加载 Angular 模块。

我已经通读了它，能够用 Angular 构建一个类似微前端的东西是非常有希望的。

编辑：

也许还有这个 npm 包：https://www.npmjs.com/package/@angular-architects/module-federation

Module Federation allows loading separately compiled and deployed code
(like micro frontends or plugins) into an application. This plugin makes
Module Federation work together with Angular and the CLI.

【讨论】：