- 文献综述（或调研报告）：
在后端，微服务架构有比较成熟的实现方案。结合前后分离模式，改变了web开发模式。微服务对后端的好处是显而易见的，因此将微服务的概念应用到前端来解决前端整体问题是一个好的想法。微前端将微服务的概念扩展到了前端。它将微服务的概念应用到浏览器端，将web应用程序从单个应用程序转换为组合多个小型前端应用程序的应用程序。每个前端应用程序都可以独立运行、开发和部署[1]。
微前端背后的想法是将web应用程序视为不同团队拥有的功能的组合。每个团队都有他们关注的独立业务或职能。团队是跨职能的，端到端、从后端到前端开发其功能。
微前端的核心思想体现在以下几个方面：
- 每个团队可以通过选择自己的技术栈独立完成项目；
- 隔离团队代码，避免共享运行时和全局变量；
- 使用前缀标识变量的所有权，以避免冲突；
- 尽可能使用浏览器事件进行通信。
在每个独立的团队开发自己的应用程序模块之后，Web应用程序可以被认为是各个模块的功能组合，即子应用程序。前端只负责选择和决定路由器要导入哪些模块，以便为最终用户提供一致的用户体验。实现微前端架构的三个典型技术实践如下：
- 路由分发：
一种路由分布式微前端，通过路由将不同的服务分发给不同的、独立的前端应用程序。这是一种非常简单有效的模块切片方法。它通常可以通过HTTP服务器的反向代理或应用程序框架附带的路由来实现。但是这种方法看起来更像是前端应用程序的集合，也就是说，这些不同的前端应用程序被组合在一起，看起来像一个完整的整体。在路由跳转过程中，通常需要刷新页面，并且会有一个白屏过程。在此过程中，跳转前的应用程序和被跳转的应用程序失去对页面的控制。如果这个应用程序有问题，用户体验就会变差[1][2]。
- lt;iframegt;嵌入：
HTML inline frame元素lt;iframegt;表示正在浏览的嵌套上下文，有效地将另一个HTML页面嵌入到当前页面中。IFrame可以创建一个全新的独立宿主环境，这意味着前端应用程序可以彼此独立运行。每个子应用程序都可以嵌入到它自己的lt;iframegt;中，这允许每个模块使用它们需要的任何框架，而不必与其他团队协调，但是仍然可以使用一些库或Window.postMessageAPI来交互。使用lt;iframegt;的最大优点是它隔离了组件和应用程序的运行时环境。因此，每个模块都可以独立开发，并且可以独立于其他部分。缺点是捆绑包的大小非常明显，因此同一个库最终可能被多次发送，而且由于应用程序是独立的，因此无法在构建时提取公共依赖项。
- Web Components 技术
Web Components是一套由自定义元素、Shadow DOM、HTML模板和HTML导入组成的不同技术。它允许开发者使用封装的功能创建可重用的自定义元素，并在web应用程序中使用它们。Web Components创建前端，前端可以以非常优雅的方式导入Web应用程序。这些部件可以与后端一起打包到微服务中。但它有几个缺点：Web组件在所有浏览器中仍然不完全受支持；JavaScript包必须先加载并注册组件才能加载DOM[7]。
在分析上述实现方案优缺点的基础上，本项目采用微前端框架Single SPA进行应用开发。Single SPA是一个以Web Components为基础的微前端框架，是一个成熟的解决方案。Single SPA从现代框架组件生命周期中汲取灵感，将生命周期应用于整个应用程序。Single SPA几乎支持所有框架。由于许多前端更新快框架短暂性，因此在设计时Single SPA并不过多依赖子项目框架的特性[6]。
Single SPA应用程序包含以下内容：
1、子应用程序，每个子应用程序都是一个完整的SPA（Single Page Application）。每个应用程序都可以响应url路由事件，并且必须知道如何从DOM加载，安装和卸载自身[3]。传统SPA和Single SPA应用程序之间的主要区别在于它们必须能够与其他应用子程序共存，并且它们各自没有自己的html页面。例如，某个React SPA是子应用程序，当它处于活动状态时，侦听url路由事件并将内容放在DOM上；不活动时，从DOM中完全删除[6]。
以上是毕业论文文献综述，课题毕业论文、任务书、外文翻译、程序设计、图纸设计等资料可联系客服协助查找。
