快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

什么是微型前端

这篇文章主要介绍“什么是微型前端”,在日常操作中,相信很多人在什么是微型前端问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”什么是微型前端”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

创新互联公司专注于盱眙企业网站建设,成都响应式网站建设公司,商城网站建设。盱眙网站建设公司,为盱眙等地区提供建站服务。全流程按需开发网站,专业设计,全程项目跟踪,创新互联公司专业和态度为您提供的服务

什么是微前端

Martin Fowler将微前端架构定义为“一种独立可交付前端应用程序被组成的建筑风格”。简单地,微前端是网页的一部分(不是整页)。在微前端架构中,有一个“主机”或“容器”页面,可以托管一个或多个微前端。主机/容器页面还可以共享一些自己的微前端组件。

例如,正如我们在先前的文章中实现的那样,我们将按钮组件从MFE1页面暴露到MFE2(主机/容器)中

什么是微型前端

或者在

http://mfe1.s3-website-us-east-a.amazonaws.com/在本文中部署到S3

什么是微型前端

微型前端架构由3个主要组件组成:

  • 微前端(在上一个示例中,MFE1的按钮是微前端)

  • 主机/容器(在前面的示例中,MFE2是主机)

  • 微型框架:我们使用了WebPack 5模块联合插件

为什么微型前端?

引入了微前端架构以解决当前SPA前端开发的多个问题。我经历了单个网站的增长,以至于它变得非常难以扩大,修改甚至培训新工程师成为其中的一部分。通过这种单片系统,开发人员将彼此封锁,以应用一个小变化。以下是微型前端的一些好处:

  • 团队可扩展性:多个团队可以独立工作以贡献多个系统。这使我们能够将工作划分并通过多个团队缩放。

  • 单一责任:这将允许每个团队构建单一责任的组件。托管团队可以专注于分析,性能和每个功能团队可以专注于客户。两支球队可以在其特定领域获得100%。主页团队可以在创建大型主页上关注100%。每个微型前端团队将焦点100%的微观前端的功能。

  • 可重用性:我们将能够在多个地方使用代码。将构建和部署一个组件,不同的团队可以重新使用它。

  • 技术不可知论:微型前端架构独立于技术。您可以使用来自不同技术的组件(JavaScript,React,Vue,Angular …)。您不必担心部署或构建它们。

  • 学习曲线:对于加入团队的新工程师,更容易学习较小的应用程序,而不是了解具有数千行代码线的巨石。

如何实施微型前端?

微前端的主要是主机/容器和微前端之间的集成。有三种方法可以整合微型前端

构建时集成

这是今天实施的大部分代码。容器将将组件安装为库,类似于您从NPM安装的库。此方法的问题正在同步图书馆的不同版本和构建问题。此外,很难使用不同的技术。此外,最终包的大小将很大,因为它包含所有依赖项。此外,您必须再次部署依赖性的任何更改。而且,容器和所有微前端之间存在紧密的耦合。

运行时集成

这是我在以前的文章中解释的。在这种情况下,容器是单独构建和部署的。每个微前端都可以作为单独的包装作为一个单独的包装,即容器/主机可以获取所需的微前端。有关此方法的更多解释,请参阅本文末尾的文章列表。在这种情况下,容器和微前端完全取耦合。它们不共享构建或部署,并可以使用不同的技术。容器可以决定要部署的微前端版本。

服务器端集成

在这种情况下,所有功能都将在确定要加载的微前端的后端中。服务器将决定将该请求路由到的URL。这是一个标准的服务器端构图。

到此,关于“什么是微型前端”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


网站题目:什么是微型前端
网页URL:http://6mz.cn/article/godpgd.html

其他资讯