- 综合排序
- 最热优先
- 最新优先
- 来自专栏超级架构师
【微前端架构】AWS 上的微前端架构
微前端架构将微服务开发原则引入前端应用程序。在微前端架构中，开发团队独立构建和部署“子”前端应用程序。这些应用程序由“父”前端应用程序组合而成，该前端应用程序充当容器来检索、显示和集成各种子应用程序。 运营开销：微前端应用程序不是管理单个前端应用程序，而是涉及为所有团队创建和管理单独的基础架构。 构建微前端 微前端架构模式最困难的挑战是将子应用程序与父应用程序集成。优先考虑用户体验对于任何前端应用程序都至关重要。 </script> </html> 下图显示了一个基于 AWS 构建的示例微前端架构。 Figure 3. 结论 微前端架构为前端应用程序引入了微服务开发的许多熟悉的好处。微前端架构还允许您管理小型独立组件，从而简化构建复杂前端应用程序的过程。
2.5K10编辑于 2022-03-08 - 来自专栏西岭老湿
微前端架构实战
可以理解微前端是一种将多个可独立交付的小型前端应用聚合为一个整体的架构风格。 这种架构目前有多种方案，都有利弊之处，但只要适用当前业务场景的就是好方案。 微前端并没有技术栈的约束。每一套微前端方案的设计，都是基于实际需求出发。 使用微前端架构就可以解决问题，在保留原有项目的同时，可以完全使用新的框架开发新的需求，然后再使用微前端架构将旧的项目和新的项目进行整合。 在 single-spa 框架中有三种类型的微前端应用： single-spa-application / parcel：微前端架构中的微应用，可以使用 vue、react、angular 等框架。 完整代码示例：modulefederationvue3: 基于模块联邦实现的 Vue3.0 微前端架构示例 (gitee.com) package.json { "name": "@vue3-demo
4.6K00发布于 2021-04-25 - 来自专栏liulun
vue3微前端架构——基于蚂蚁qiankun框架
楔子 首先，目前qiankun框架尚不支持vite， 微应用不能使用vite创建, 即使只是生产环境加的载微应用也不行， 因为vite打包代码时，内部的esbuild会tree shake掉与qiankun 相关的生命周期钩子， 主应用没影响，使用什么创建项目都无所谓 主应用 没啥特殊的，随便一个组件里留个容器div
在一个方法内加载微应用 import qiankun'; export default { setup(){ let create = ()=>{ loadMicroApp({ name: 'vue3' ，请自己看文档 微应用 配置文件：vue.config.js const path = require('path'); const { name } = require('. "/vue3" : "/"), routes, }); export default router; main.js 这里有好多钩子，是给主应用用的 if (window.4.2K20发布于 2020-12-08 - 来自专栏Super 前端
前端架构--从入门到微前端
年中，自己做规划（2019Thinking(上) – 一个前端开发者的个人思考）时，考量了一段时间「微前端」，也关注到了《微前端的那些事儿》的文章，从而了解了作者「黄峰达」，也就购买了下面将要聊的书《 前端架构：从入门到微前端》 本书围绕前端架构的实施，从基础的架构规范，到如何设计前端架构，再到采用微前端架构拆分复杂的前端应用。 设计：架构设计的模式，以及设计和制定前端工作流 基础：通过深入构建系统、单页面应用原理、前端知识体系等，来构建出完整的前端应用架构体系 实施：通过与代码结构的方式，介绍如何在企业级应用中实施组件化架构、 设计系统和前后端分离架构 微前端：引入6种微前端的概念，以及如何划分、设计微前端应用，并展示了如何实现这6种微前端架构 演进：提出更新、迁移、重构、重写、重新架构等架构演进方式，来帮助开发人员更好地设计演进式架构 业务相关内容 微前端？目前预演中，对于目前我们思考的点： 业务边界如何划分？ 应用的标识化或者注册中心的方式如何考量？ 应用通信机制：嵌入业务的特定通信机制 或 剥离业务的通用通信机制？
1.2K21发布于 2020-05-28 - 来自专栏氧化先生的专栏
【架构拾集】 微前端：微应用化
微应用化即在开发和运行时，应用都是以单一、微小应用的形式存在。 微应用化与微前端架构相当的类似，它们在开发时都是独立应用，在构建时又可以按照需求单独加载。 如果以微前端的单独开发、单独部署、运行时聚合的基本思想来看，微应用化就是微前端的一种实践。只是使用微应用化意味着：我们只能使用唯一的一种前端框架。 如果从框架不限的角度来定义，怕是离微前端有些远，不过大团队怕是不会想同时支持多个前端框架。 适用场景 为了方便后期我的查阅，我还是简单地写个相应架构的电梯演进。 关键因素 描述 对于 想拆解单体前端应用的团队 我们的架构 微应用化 是一个 类微前端架构 它可以 在开发环境将应用拆分成一个个的模块化应用，在构建时以单体的形式构建 但他不同于 微前端架构 它的优势是 使用 E2E 测试对于微前端或者微服务化架构来说，是一种特别有效的方式。唯一的问题可能是，它运行起来比较慢。
89330发布于 2018-08-21 - 来自专栏phodal
《前端架构：从入门到微前端》目录
本书是一本围绕前端架构的实施手册，从基础的架构规范，到如何设计前端架构，再到采用微前端架构拆分复杂的前端应用。本书通过系统地介绍前端架构世界的方方面面，来帮助前端工程师更好地进行系统设计。 实施：通过与代码结构的方式，介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。 微前端：引入 6 种微前端的概念，以及如何划分、设计微前端应用，并展示了如何实现这 6 种微前端架构。 带来技术挑战 2.4.4 架构完善及演进 2.5 小结 第 3 章 架构基础：工作流设计 3.1 代码之旅：基础规范 3.2 代码组织决定应用架构 3.3 统一代码风格，避免架构腐烂 3.4 使用 Lint 微前端架构 9.1.2 为什么需要微前端 9.2 微前端的技术拆分方式 9.2.1 路由分发式 9.2.2 前端微服务化 9.2.3 组合式集成：微应用化 9.2.4 微件化 9.2.5 前端容器：iframe 9.7 “微”害架构 9.7.1 微架构 9.7.2 架构的演进 9.7.3 微架构带来的问题 9.7.4 解决方式：可拆分式微架构 9.8 小结 第10章 微前端实战 10.1 遗留系统：路由分发
3.1K20发布于 2019-06-19 - 来自专栏code秘密花园
从微前端聊聊架构演进
就目前来看，微前端已经不是一个新话题了。随着越来越多的公司的深入研究，当前也提出了很多的解决方案。不过本文不是想要来介绍微前端，更想介绍项目如何一步步到达微前端架构的实际需求。 当然，也不排除有些项目在初期就需要微前端这样的架构，不过我一直相信，任何架构模式都是根据实际需求来构建的。 同时，微前端不会限制技术栈。某些特定场景下可能特定的技术栈有更好的生态。 当然，我认为微前端的最大的作用就是在遗留系统中做增量升级。面对已经上线几年的老项目，我们不可能一步到位就升级现有系统的技术栈。 微前端是我已知实现渐进式重构的最好方案。 因为公司目前在创业阶段，没有微前端的需求。所以对微前端更多的是概念解读，而并非落地实践。
76410发布于 2020-02-20 - 来自专栏超级架构师
「微前端架构」微前端-Angular风格-第2部分
移动到微前端方法是朝着正确的方向移动，因为应用程序越大，速度越小。 本文展示了一个使用Angular作为框架的解决方案，类似的解决方案也可以使用其他框架来实现。 本文:http://pub.intelligentx.net/micro-front-ends-doing-it-angular-style-part-2 讨论:请加入知识星球或者小红圈【首席架构师圈】
5.7K20发布于 2019-08-16 - 来自专栏前端博客
微前端学习笔记（1）：微前端总体架构概述，从微服务发微
微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将单页面前端应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立开发、独立部署。 微前端微前端是一种类似于微服务的架构，是一种由独立交付的多个前端应用组成整体的架构风格，将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的应用，而在用户看来仍然是内聚的单个产品。 微服务架构，可以解耦后端服务间依赖。而微前端，则关注于聚合前端应用。热闹驱动开发。新的技术，既然很热闹，那么就学吧。微前端的实现，意味着对前端应用的拆分。 微前端的整体架构微前端部署平台目前较成熟的微前方案有 qiankun、micro-app、EMP 方案，但是它们与MF有着本质的不同，那就是对“微前端”的定义：方案微的定义微前端的定义Module Federation 《微前端学习笔记（1）：微前端总体架构概述，从微服务发微》,请注明出处：https://www.zhoulujun.cn/html/webfront/engineer/Architecture/9029
1.2K10编辑于 2024-06-06 - 来自专栏EAWorld
一文读懂微前端架构
目录： 1.什么是微前端 2.为什么需要微前端，它有什么优势 3.如何实现微前端架构 4.运行时微前端的具体实现方式 5.微前端的问题和缺点 一、什么是微前端 而提到微前端就离不开微服务，大家对微服务都比较熟悉了 前端架构经历了从单体，到前后端分离，再到微服务，最终发展到现在的微前端的过程如下图所示： 微前端的思路是把微服务的架构引入到前端，其核心都是要能够以业务为单元构建端到端的垂直架构，使得单个的团队能够独立自主的进行相关的开发 三、如何实现微前端架构 微前端不是一个库，是一种前端架构的设计思路，要实现微前端，本质上就是在运行时远程加载应用。 { try_files $uri app3/index.html; } } } 无论你采用哪一种的微前端架构，Nginx方向代理或者其它的API网关的解决方案都能够提供方便灵活的后端路由功能 3. 性能上来看，如果优化得不好微前端的性能可能会存在问题，至少微前端框架是额外的一层加载。如果不同的微前端使用了不同的框架，那么每一个框架都需要额外的加载。
3.7K70发布于 2021-05-27 - 来自专栏趣谈前端
微前端架构初探以及我的前端技术盘点
微前端架构概念的诞生及应用对于提供复杂应用服务的企业来说显然是一种机遇, 同样也是一种挑战.本文主要就微前端架构的概念和实现方案做一个总结和复盘,并且通过一个实际案例来实践微前端架构,希望能对同样有此需求的朋友们提供一些帮助和思路 你将收获 什么是微服务以及微服务能给企业带来什么 微前端架构概念及方案 umi下的微前端架构方案实战 一个程序员的技术复盘与展望 正文 在总结微前端架构之前,让我们来先看看微服务是什么. 1.什么是微服务以及微服务能给企业带来什么 . 2.微前端架构概念及方案 2.1 理解微前端架构 上面简单介绍了一下微服务架构,接下来我们进入主题,来聊聊微前端. 基umi + qiankun实现的微前端架构 目前市面上也有非常成熟的微前端架构方案，比如single-spa，之前的美团外卖微前端架构和蚂蚁金服基于single-spa开发的微前端架构qiankun（ 具体架构如下： 3.umi下的微前端架构方案实战 接下来我具体介绍如何使用乾坤来搭建我们的微前端架构，由于我们内部采用umi，所以这里我们直接使用其提供的@umijs/plugin-qiankun插件来实现
1.3K10发布于 2020-04-07 - 来自专栏Teobler的开发日记
前端架构演进 - 从单体到微前端（理论篇）
本文将从一个我最近经历的项目出发，讲解我们是如何在两周时间内将一个单体前端应用演化为一个微前端应用的。 为什么有这次演进 [why] 不是为了解决问题胡乱上莫名其妙的解决方案就是耍流氓。 微前端和微服务一样都是为了解决问题而诞生的解决方案，先看看你的项目是不是也遇到了这些问题，再决定做不做吧。 在这样的业务场景下在项目开始之初后端很自然地选择了微服务作为业务解耦和降低系统复杂度的解决方案，但前端因为考虑不周加上客户比较保守并没有采取微前端的解决方案，而是以分文件目录的方式尝试区分各个子系统。 ，每一次子系统的部署需要对整个应用进行打包，同时如果一个应用挂了，将会影响整个系统，微前端可以在这件事上做得更好 演进发生的时机 [when] 架构需要发生改变往往是因为开发人员发现当前的架构没办法应对业务的发展和变化 技术选型 [selection] 这个部分不一定每一次演进都会有，在我们的这个案例中，因为我们需要将一个单体应用拆分成微前端，为了减少拆分的工作量，增加项目的可维护性，我们需要挑选一个合适的微前端框架来解决这个问题
82701发布于 2021-04-25 - 来自专栏前端迷
爱奇艺号微前端架构实践
近来，微前端的概念非常火爆，那么什么是微前端架构？微前端架构是一种架构风格类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 爱奇艺号前端工程基于Vue的框架已经使用了3年之余，这一版本虽有不错的可扩展性，但随着接入的业务越来越多，项目复杂度和代码行数增长，现有框架需要将框架与业务更加的解耦以方便其他团队进行维护，同时也需要模块的独立部署 除了基本的Vue启动应用等功能，微前端容器的架构逻辑需要做到下面几点： 1、将微前端模块需要的通用代码绑定至全局函数； 2、基于请求的url获取相对应的微前端模块部署的js manifest文件地址列表 （列表manifest中包含业务自己定义的路由、js模块的地址列表）； 3、通过匹配微前端模块中定义的路由获取页面所需的微前端模块； 4、加载每个微前端模块的具体js文件地址并将其渲染。 Webpack打包时会将每一个entry生成一个js文件以便单独调用，因为每个entry js代码都包含初始化框架的逻辑，所以理论上每个entry代码都可以独立运行； 3、因为每次部署后所有js代码的hash
1.1K10发布于 2020-02-21 - 来自专栏博文视点Broadview
电子书丨《前端架构：从入门到微前端》
▊《前端架构：从入门到微前端》 / 黄峰达 著 电子书售价：39.5元 2019年6月出版 本书是一本围绕前端架构的实施手册，从基础的架构规范，到如何设计前端架构，再到采用微前端架构拆分复杂的前端应用。 本书通过系统地介绍前端架构世界的方方面面，来帮助前端工程师更好地进行系统设计。 前端架构包含以下五部分内容。 设计：讲述了架构设计的模式，以及设计和制定前端工作流。 基础：通过深入构建系统、单页面应用原理、前端知识体系等，来构建出完整的前端应用架构体系。 实施：通过与代码结构的方式，介绍如何在企业级应用中实施组件化架构、设计系统和前后端分离架构。 微前端：引入6种微前端的概念，以及如何划分、设计微前端应用，并展示了如何实现这6种微前端架构。 演进：提出更新、迁移、重构、重写、重新架构等架构演进方式，来帮助开发人员更好地设计演进式架构。 本书适合想要成为优秀前端开发工程师（初中级），或致力于构建更易于维护的系统架构的开发人员、技术主管、软件架构师和软件项目经理等。 ---- ▼ 点击阅读原文，立刻下单！
50020编辑于 2023-05-19 - 来自专栏程序员成长指北
爱奇艺号微前端架构实践
前言 近来，微前端的概念非常火爆，那么什么是微前端架构？ 微前端架构是一种架构风格类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 爱奇艺号前端工程基于Vue的框架已经使用了3年之余，这一版本虽有不错的可扩展性，但随着接入的业务越来越多，项目复杂度和代码行数增长，现有框架需要将框架与业务更加的解耦以方便其他团队进行维护，同时也需要模块的独立部署 除了基本的Vue启动应用等功能，微前端容器的架构逻辑需要做到下面几点： 1、将微前端模块需要的通用代码绑定至全局函数； 2、基于请求的url获取相对应的微前端模块部署的js manifest文件地址列表 （列表manifest中包含业务自己定义的路由、js模块的地址列表）； 3、通过匹配微前端模块中定义的路由获取页面所需的微前端模块； 4、加载每个微前端模块的具体js文件地址并将其渲染。
1.3K32发布于 2020-03-03 - 来自专栏一道题做一宿
基于Webpack5实现微前端架构
前言 最近这段时间微前端这个概念越来越被提及，它采用了微服务的相关理念，我们可以把一个应用拆分成多个可以互不依赖可以独立开发并单独部署的模块，然后在运行时把它们组合成一个完整的App。 从Webpack5开始，已经内置了对微前端开发的支持，它们提供了一个新的功能叫Module Federation（我也不知道该怎么翻译这个术语会比较恰当），提供了足够的能力来让我们实现微前端开发。 我们会实现一个简单的App，然后把它通过webpack改造成微前端的形式。 我们开始吧！ 这次所有配置都由我们来手动完成。 接下来我们来把它改造成微前端的形式，把Header做成单独的模块，然后其它的做成另外一个模块，这时候就要用到ModuleFederationPlugin了。 今天我们仅仅用Module Federation实现了一个小demo，关于微前端跟webpack的管理都不是一篇文章就能够说得清楚的，还有很多事情可以聊，咱们后面再分别单独展开讲讲，Happy coding
1.1K20发布于 2021-08-13 - 来自专栏前端开发中的事
微前端之qiankun微前端
什么是微前端: 微前端项目是将每一个可以独立开发，测试，部署的子项目集合到一个主项目之下。对于用户来说，主项目仍然是一个完整的产品，而整个组装的过程对于用户来说，是透明的。 微前端不仅仅可以兼容不同的开发环境还可以兼容技术栈。可以做到更大程度的解耦合。 spa网页 [image.png] 微前端网页 [image.png] 为什么需要微前端： 当前应用较大，需要拆解开独立开发 多业务团队，独立开发同一个项目 集合式的中台项目等项目需要 同一个项目内需要兼容不同的架构项目 微前端的特点： 任意的JS框架都可以兼容使用，接入简单。 ，微前端的落地实现 qiankun的特点： 基于 single-spa 封装，提供了更加开箱即用的 API。
3K70发布于 2021-04-01 - 来自专栏Web大前端
Webpack模块联邦：微前端架构的新选择
Webpack模块联邦（Module Federation）是Webpack 5引入的一项革命性特性，它彻底改变了微前端架构的实现方式。 基础概念容器应用（Container）：作为微前端架构的宿主，负责加载和协调各个微应用。远程应用（Remote）：独立的微应用，可以暴露自己的模块给其他应用使用，也可以消费来自其他应用的模块。 Webpack模块联邦通过简化微前端架构中的代码共享机制，为现代Web应用的开发和维护提供了一种高效且灵活的解决方案。 版本管理和依赖管理在微前端架构中，确保不同应用之间的依赖版本兼容是关键。 路由集成在微前端架构中，路由管理是一个重要的组成部分。你可以使用像react-router-dom这样的库，结合Microfrontends-Router或自定义解决方案来实现跨应用的路由跳转。
1.6K00编辑于 2024-06-07 - 来自专栏开发经验
架构的未来：微前端与微服务的融合
文章目录 微服务架构简介 微前端架构简介 微前端与微服务的融合 1. 共享服务 2. 基于事件的通信 3. 统一的身份和认证 4. 交付管道的集成 示例：使用微服务和微前端的电子商务平台 微服务架构 微前端架构 融合微服务和微前端 结论 欢迎来到架构设计专栏~架构的未来：微前端与微服务的融合 ☆* o(≧▽≦)o *☆嗨~我是 微前端架构简介 微前端架构是一种将前端应用程序拆分为小型、可独立开发和部署的模块的架构风格。每个前端模块可以由不同的团队开发和维护，并且可以独立部署到应用程序中。 微前端架构通过组合不同的前端模块来构建整个用户界面。 微前端架构的优点包括： 独立开发和部署： 前端模块可以独立开发、测试和部署，无需干扰其他模块。 微前端架构也可以使用类似的方式来进行前端模块之间的通信。将事件驱动的通信机制应用于微前端架构，可以实现松耦合的前后端通信，从而提高了系统的可维护性和扩展性。 3.
84210编辑于 2023-12-13 - 来自专栏超级架构师
「微前端架构」-Angular风格-第1部分
没有必要过多地讨论拥有大型代码库和大型团队的问题…… “微前端”这个术语最近被频繁使用，它提供了一个类似于微服务的概念，我们可以将单个前端应用程序拆分为微应用程序，这些微应用程序可以加载到用户浏览器上运行的单个容器应用程序中 独立模式 每个微应用都应该能够完全独立运行，所以每个负责给定应用的团队都应该能够独立于其他应用运行。 测试 在每个微应用程序上独立运行测试，这样一个应用程序中的bug很容易识别，不会反映到其他应用程序上。 一个到多个 我们希望能够多次使用每个微应用程序，一个微应用程序不应该关心它在哪里运行，只知道它的输入和输出。 因为我们不想要加载大型模块,如角,lodash和多次CSS样式的应用程序是很重要的微型应用程序能够共享公共资源,也就是说,我们也希望能够允许他们只封装资源相关,或封装在应用程序资源有不同的版本,例如应用程序使用lodash 3和应用程序
77430发布于 2019-08-06
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号