- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端开发中的事
微前端之qiankun微前端
什么是微前端: 微前端项目是将每一个可以独立开发，测试，部署的子项目集合到一个主项目之下。对于用户来说，主项目仍然是一个完整的产品，而整个组装的过程对于用户来说，是透明的。 微前端不仅仅可以兼容不同的开发环境还可以兼容技术栈。可以做到更大程度的解耦合。 spa网页 [image.png] 微前端网页 [image.png] 为什么需要微前端： 当前应用较大，需要拆解开独立开发 多业务团队，独立开发同一个项目 集合式的中台项目等项目需要 同一个项目内需要兼容不同的架构项目 微前端的特点： 任意的JS框架都可以兼容使用，接入简单。 ，微前端的落地实现 qiankun的特点： 基于 single-spa 封装，提供了更加开箱即用的 API。
3.2K70发布于 2021-04-01 - 来自专栏智能时刻
【微前端架构】AWS 上的微前端架构
带有微前端的微服务后端 微前端的好处 与单体前端相比，微前端具有以下优势： 独立工件：微服务开发的核心原则是工件可以独立部署，这对于微前端仍然适用。 微前端挑战 相反，微前端提出了以下挑战： 父/子集成：微前端引入了确保父应用程序以与单体应用程序相同的一致性和性能显示子应用程序的任务。这一点将在下一节中进一步讨论。 构建微前端 微前端架构模式最困难的挑战是将子应用程序与父应用程序集成。优先考虑用户体验对于任何前端应用程序都至关重要。 </script> </html> 下图显示了一个基于 AWS 构建的示例微前端架构。 Figure 3. 他们使用 AWS 开发人员工具并使用 Amazon CloudFront 将应用程序部署到 Amazon Simple Storage Service (S3)。
2.7K10编辑于 2022-03-08 - 来自专栏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.4K20发布于 2020-12-08 - 来自专栏前端博客
微前端学习笔记(3):前端沙箱之JavaScript的sandbox（沙盒沙箱）
为微前端框架主要做2个工作，一个是JS的sandBox，其次是把sandbox内执行的结果 输出 webcomponts到 页面内。 通过使用沙箱，每个前端应用都可以拥有自己的上下文环境、页面路由和状态管理，而不会相互干扰或冲突。那么如何实现JavaScript的sandbox呢？ window上的，这就限制了同一时刻不能有两个激活的微应用。 每个微前端应用在启动时会得到它自己的沙箱实例，因此它们会有自己的状态池和拦截逻辑，这允许应用独立地操作全局对象而不互相干扰。 总结：多实例运行语法兼容不污染全局环境（主应用）LegacySanbox❌❌❌ProxySandbox✅❌✅SnapshotSandbox❌✅❌iframe✅✅✅转载本站文章《微前端学习笔记(3):前端沙箱之
4.8K21编辑于 2024-06-06 - 来自专栏学习猿地
Web前端学习 第11章 微信开发3 微信签名规则
一，概述 为了让微信接口的调用更加安全，微信服务器要对支付接口和JS-SDK接口进行加密和校验。因此开发调取微信支付和JS-SKD接口，必须了解微信签名的规则。 十六进制” ）；} 上诉算法可以将一个单独的集合按照签名规则计算出签名结果，参数为一个对象，对象中包含了所有分段，示例如下所示： 1 { 2 jsapi_ticket：jsapi_ticket ， 3 timestamp：timestamp ， 4 noncestr：nonceStr ， 5 url：“ http://www.eduwork.cn/phone” 6 } 三，总结 本章讲解了微信签名的目标和方法 ，了解了签名，我们便可以在后续的章节中调用JS-SDK和微信支付接口了。
1.6K10发布于 2020-07-09 - 来自专栏学习猿地
Web前端学习 第11章 微信开发3 微信签名规则
一，概述 为了让微信接口的调用更加安全，微信服务器要对支付接口和JS-SDK接口进行加密和校验。因此开发调取微信支付和JS-SKD接口，必须了解微信签名的规则。 十六进制” ）；} 上诉算法可以将一个单独的集合按照签名规则计算出签名结果，参数为一个对象，对象中包含了所有分段，示例如下所示： 1 { 2 jsapi_ticket：jsapi_ticket ， 3 timestamp：timestamp ， 4 noncestr：nonceStr ， 5 url：“ http://www.eduwork.cn/phone” 6 } 三，总结 本章讲解了微信签名的目标和方法 ，了解了签名，我们便可以在后续的章节中调用JS-SDK和微信支付接口了。
1.8K20发布于 2020-07-09 - 来自专栏京东技术
微前端概述
Tech 导读 本文由浅到深地对微前端进行了概括性介绍，读者可以了解到微前端的概念、微前端的特点与价值、微前端的实现方案、一个微前端框架应具备的功能，以及微前端的适用场景。 读者可以多关注下本文提到的各个开源的优秀的微前端实现方案，通过对比及借鉴来实现一套适合自身业务的微前端方案。 01 微前端是什么 传统的分而治之的策略已经无法应对现代 Web 应用的复杂性，因此衍生出了微前端这样一种新的架构模式，与后端微服务相同，它同样是延续了分而治之的设计模式，不过却以全新的方法来实现。 3.icestark：icestark通过微应用入口字段的配置进行应用的渲染，支持多种入口配置形式：url、entry（即html url）、entryContent（即html内容，用于解决html 《前端架构从入门到微前端》一书中，将微前端的实现方案分为六种：路由分发、前端微服务化、微应用、微件化、iframe、Web Components。
2.2K40编辑于 2022-03-17 - 来自专栏一Li小麦
微前端随记
微前端 大型组织的组织结构，软件架构在不断变化。导致组织和应用不断膨胀，从而映射到软件架构中。 移动优先->App平台（One App）->中台战略->...? 微前端是一种类似微服务的架构。是微服务理念在浏览器端的应用实践。即将原来由单页面前端应用由单一的单体，转变微多个小型前端应用的聚合体。每个子项目可以独立开发部署，也可以进行并行开发。 微前端的核心思想就是（拆）分（自）治。达到降低维护成本的目的。以下是它的三个基本概念： 自治：不同应用由不同团队维护，但遵循统一的接口规范或框架以便于集成。因此彼此之间不存在依赖。 那么什么时候考虑做微前端？ •遗留系统的迁移：最重要的原因。正在赚钱的东西没有理由毁掉重来。人生苦短，尽量不要重构了。•聚合前端应用：这是前端特有的需求——后台使用微服务，希望的是解耦服务之间的依赖。 ——微前端就是一种“热闹”的技术。因此，在采用之前，需要看看看别人的失败经验。对于未来，仍然有很多路要走。
53510编辑于 2022-03-29 - 来自专栏微信小程序栏目
微前端——理论
***一、微前端1、什么是微前端微前端类似于微服务，它将微服务的理念应用于浏览器端。（1）微服务：把后端的功能进行了拆分，使用统一的网关进行调用。 图片***对前端应用进行拆分，将不同的功能按照不同的维度拆分成多个子应用，实现应用的自治。微前端的核心在于拆, 拆完后再合！ ，再接入主应用2、为什么使用微前端（1）老代码迁移之前的老应用，已经稳定运行了，并且没有新功能，没有理由去重写这一整套，这个时候就可以使用微前端，直接整合到新应用中（2）前端聚合现在有很多这种情况，一家公司会提供一系列的产品 但是，如果对于这样一个“流行”的技术，没有多加研究，就直接在项目中使用，难免会出现一些问题3、微前端架构模式（1）基座模式通过一个主应用来管理所有子应用，他可以只是单纯的基座功能，也可以带有业务功能，一般业务都是核心部分业务 优点：通用度高缺点：设计难度大例如：用户想要访问A应用，不需要加载其他应用，直接可以打开4、微前端拆分方式不合理的采用微前端，可能会带来很多问题，如前端基础设施不完善，会导致各个应用有大量的重复代码。
2.8K130编辑于 2022-10-06 - 来自专栏万丈高楼平地起
微前端乾坤
1.什么是微前端？ 微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。 微前端不是单纯的前端框架或者工具，而是一套架构体系， qiankun 是一个基于 single-spa 的微前端实现库，旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。 qiankun 孵化自蚂蚁金融科技基于微前端架构的云产品统一接入平台。 *基于 *single-spa 封装，提供了更加开箱即用的 API。 packageName}-[name]`, libraryTarget: "umd", jsonpFunction: `webpackJsonp_${packageName}`, }, }; 3. 第二种是基于 redux 实现的通信方式 - Shared 通信，适合需要跟踪通信状态，子应用具备独立运行能力，较为复杂的微前端应用。
1.9K20编辑于 2022-03-09 - 来自专栏柒八九技术收纳盒
理解微前端
今天我们来谈谈一个比较时髦的概念- 「微前端」。 「微前端」是一套用于「组织大型前端应用的指导规范」。是受后端「微服务」启发而发展而来。 接下来，我们就从微前端解决了哪些现存前端问题，并在解决这些问题的过程中做出了哪些取舍和权衡。 话不多说，我们开始。 微前端试图解决什么问题？ 有一些底层技术，如「webpack模块联盟」，使微前端成为可能。还有像single-spa这样的流行框架，为实现微前端做出了不小的努力。 这可能是设计上的问题，因为微前端并不指向一个特定的通用实现。这也是为什么对微前端的用途会让人感到困惑的原因之一。 而，「微前端」都是为了「解决组织问题，而不是性能问题」。它被用在由许多团队合作的大型SPA的背景中。 微前端的潜在问题 ❝微前端有着崇高的目标，「旨在解决真正的大型项目组织问题」。
66720编辑于 2022-08-25 - 来自专栏前端自习课
【微前端】1443- 将微前端做到极致-无界方案
本文提供一种基于 iframe 的全新微前端方案，完善的解决了这些核心诉求。 为什么还要造微前端框架 目前较成熟的微前方案有 qiankun、micro-app、EMP 方案，下面分别分析这三个微前端方案： qiankun 方案 qiankun 方案是基于 single-spa 的微前端方案。 速度快 无界微前端非常快，主要体现在首屏打开快、运行速度快两个方面。 无界微前端不仅能够做到静态资源的预加载，还可以做到子应用的预执行。
7.1K32编辑于 2022-11-15 - 来自专栏深度学习与python
微前端的未来
最后，我会分享下 2022 年我将关注微前端生态系统的哪些方面。 增加事先设计 微前端架构的主要挑战之一是回答这样一个问题：微前端有多 "微"？ 许多组织都面临这个问题。 在与数个从事分布式架构工作的团队的几次接触中，我发现，“分布式组件”的实现比微前端多得多。通过分布式组件，领域知识在容器和“微前端”之间，甚至是容器和多个“微前端”之间共享。 微前端通信 当同一个视图中有多个微前端时，它们有时候需要相互通信。 在我为设计微前端而创建的心理模型中，我建议微前端之间使用发布 - 订阅模式进行通信，严格执行微前端之间的边界，避免或至少减少设计时耦合，让团队有更大的自主性。 想象一下，一个微前端基础设施会自动把自己注册到一个发现服务中，而 UI 设计器会从发现服务中检索微前端，而不是直接与微前端进行点对点的联系。
71920编辑于 2022-06-13 - 来自专栏西岭老湿
微前端架构实战
微前端并没有技术栈的约束。每一套微前端方案的设计，都是基于实际需求出发。 1-3 微前端落地方案 自组织模式：通过约定进行互调，但会遇到处理第三方依赖等问题。 基座模式：通过搭建基座、配置中心来管理子应用。 , 微前端应用名称 "@组织名称/应用名称" 2. app: 函数类型, 返回 Promise, 通过 systemjs 引用打包好的微前端应用模块代码 (umd) 3. activeWhen 3 创建基于 React 的微应用 3-3-1 创建 React 微应用 创建应用：create-single-spa ，注意组织及项目名字，后面注册微应用是会用到 应用目录输入 todos 框架选择 完整代码示例：modulefederationvue3: 基于模块联邦实现的 Vue3.0 微前端架构示例 (gitee.com) package.json { "name": "@vue3-demo
4.9K00发布于 2021-04-25 - 来自专栏WebJ2EE
【微前端】：Why Not Iframe
为什么不用 iframe，这几乎是所有微前端方案第一个会被 challenge 的问题。 但是大部分微前端方案又不约而同放弃了 iframe 方案，自然是有原因的，并不是为了 "炫技" 或者刻意追求 "特立独行"。 如果不考虑体验问题，iframe 几乎是最完美的微前端解决方案了。 其中有的问题比较好解决(问题1)，有的问题我们可以睁一只眼闭一只眼(问题4)，但有的问题我们则很难解决(问题3)甚至无法解决(问题2)，而这些无法解决的问题恰恰又会给产品带来非常严重的体验问题，最终导致我们舍弃了
1.4K10编辑于 2022-03-30 - 来自专栏Dawnzhang的开发者手册
微前端建设方案
2、应用微前端，可以集成主框架运行，可以独立运行。 3、应用微前端，不能强依赖主框架的基础文件。 2.4 总体设计 第3章 架构设计 3.1 微前端架构设计 实现“1+1+N模式”。 第4章 研发清单 4.1 研发清单 一 前端架构 1 主架构前端 2 测试Demo前端 3 主应用前端（IBPS ） 二 应用微前端 1 公文办理前端 2 通知公告前端 3 会议前端 4 工作量（人天） 1 主架构前端 7 2 测试Demo前端 14 3 主应用前端（IBPS） 7 二 应用微前端 1 公文办理前端（重构） 60 2 通知公告前端 20 3 会议前端 30 4 规范性前端 20
90841编辑于 2022-05-10 - 来自专栏前端技术研究和应用
浅析微前端技术
CustomElement 结合自定义的 ShadowDom，将微前端封装成一个类 WebComponent 组件，从而实现微前端的组件化渲染。 微前端的适用场景微前端的适用场景中大型项目建设微前端项目的初衷就是为未来可能的扩展开发提供可能，因此微前端非常适合具有多个团队维护的大型项目。 如果你把生产力放在首位，可以考虑 微前端 架构微前端的劝退场景业务边界不清晰的项目，在发起一个微前端项目前，你需要对该项目的业务领域及分工有着全面的了解。 如果你不知道某个特定的功能是由哪个团队负责开发及维护的，最终这个微前端项目将会变得一团乱，开发及维护成本极高，而由此带来的人效提升却很少，背离的微前端的初衷。 小型项目，在评估是否需要采用微前端架构前，你需要对平台的规模有大概的认知，不要为了纸面上的优势而强行采用微前端方案，业界还有很多其他小而美的框架可以尝试。微前端是前端发展的必然阶段。
2.1K60编辑于 2023-04-14 - 来自专栏Super 前端
前端架构--从入门到微前端
年中，自己做规划（2019Thinking(上) – 一个前端开发者的个人思考）时，考量了一段时间「微前端」，也关注到了《微前端的那些事儿》的文章，从而了解了作者「黄峰达」，也就购买了下面将要聊的书《 前端架构：从入门到微前端》 本书围绕前端架构的实施，从基础的架构规范，到如何设计前端架构，再到采用微前端架构拆分复杂的前端应用。 设计：架构设计的模式，以及设计和制定前端工作流 基础：通过深入构建系统、单页面应用原理、前端知识体系等，来构建出完整的前端应用架构体系 实施：通过与代码结构的方式，介绍如何在企业级应用中实施组件化架构、 设计系统和前后端分离架构 微前端：引入6种微前端的概念，以及如何划分、设计微前端应用，并展示了如何实现这6种微前端架构 演进：提出更新、迁移、重构、重写、重新架构等架构演进方式，来帮助开发人员更好地设计演进式架构 业务相关内容 微前端？目前预演中，对于目前我们思考的点： 业务边界如何划分？ 应用的标识化或者注册中心的方式如何考量？ 应用通信机制：嵌入业务的特定通信机制 或 剥离业务的通用通信机制？
1.3K21发布于 2020-05-28 - 来自专栏程序那些事儿
微前端那些事儿
什么是微前端 根据Micro-Frontend 官网的定义，微前端是将网站或者 web 应用程序视为由独立团队拥有的功能组合。 构建微前端应用程序有不同的方法，但主要我们可以将它们分为四个重要方面: 路由微前端 组成微前端 微前端通信 定义微前端 微前端的组合 微前端由客户端，服务器端，边缘测组合而成。 微前端之间的通信 与路由一样，微前端之间的通信也取决于组合的类型。当我们在相同或不同页面上使用多个微前端时，我们总是希望可以和其他微前端用户交互。 不同微前端之间的沟通可能不是那么微不足道，尤其是当有不同的团队构建它们时。为了维持独立部署的原则，我们需要确保每个微前端都不知道其他微前端，即使它们是水平分割的并且是同一页面的一部分。 这些自定义事件通过一个常见的类似对象的窗口进行调度，以便所有微前端都可以使用它。 定义微前端 在微前端我们可以使用不同的技术栈，我们可以将vue和react进行结合使用。
70930编辑于 2023-03-07 - 来自专栏coding个人笔记
做个微前端demo
之前已经分享过微前端，至于落地还是不落地就看公司和项目了，今天基于微前端做了个小demo，分享一下。 可以去qiankun官网看看，包括微前端核心设计理念、为什么不是ifram和快速上手及一些问题都很清楚。 只有真正用来开发项目之后，才能发现还有很多状况需要解决，这边只是单纯的跑个应用，代码上传git了： https://github.com/wade3po/qiankundemo
1.3K30发布于 2020-09-04
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号