在独立托管微前端的同时，开发微前端web应用程序的最佳方式是什么

Question

我试过了，

1. 单一SPA
2. Web组件

但在这两种方式中，我都找不到单独开发和部署Micro前端的方法，然后在包装器web应用程序中引用这些部署的Micro前端
在我尝试使用上述方法的示例中，微前端在包装器web应用程序中进行渲染，但当独立提供时，它们不会按预期进行渲染。

Answer 1

使用普通的静态站点解决方案是无法做到这一点的。您必须使用一些后端。问题是，您需要动态地提供一个微前端应用程序(mfa(列表，因此您必须至少更改一些内容。

实现这一点的最简单方法是：

1. 创建一个知道如何动态加载脚本的脚本(让它命名为Loader((请参阅document.createElement(
2. 创建一个API端点，该端点将返回应加载的脚本列表。(此处显示后端(
3. 更新Loader以使用API获取要加载的微前端的列表

现在，您的模式应该是这样的：

--> Index.html started
--> Loader do fetch for the list of the mfa scripts
--> Loader adds listed scripts dynamically
--> Applications start working

当你需要更改应用程序列表时，你不需要重新部署任何内容。只需更改API响应(通过更新DB、配置或您想要的任何内容(，它就会工作。

这并不理想(从性能角度来看非常不理想，但适用于普通静态站点(。

更好的方法(如果您有后端(是动态生成页面，并在服务器端动态嵌入脚本和应用程序。它更简单，也可能更快，因为您不需要等待对API的调用来获得mfa列表。

希望这能有所帮助。

附言：使用动态脚本加载可能很危险。如果您决定采用第一种方式，请不要忘记验证所有脚本是否可信。例如，您可以使用内容安全策略。