立即前往

活动

天翼云最新优惠活动,涵盖免费试用,产品折扣等,助您降本增效!
查看全部活动
热门活动
  • 智算采购季 热销S6云服务器2核4G限时88元/年起,部分主机可加赠对象存储组合包!
  • 免费体验DeepSeek,上天翼云息壤 NEW 新老用户均可免费体验2500万Tokens,限时两周
  • 云上钜惠 HOT 爆款云主机全场特惠,更有万元锦鲤券等你来领!
  • 算力套餐 HOT 让算力触手可及
  • 天翼云脑AOne NEW 连接、保护、办公,All-in-One!
  • 一键部署Llama3大模型学习机 0代码一键部署,预装最新主流大模型Llama3与StableDiffusion
  • 中小企业应用上云专场 产品组合下单即享折上9折起,助力企业快速上云
  • 息壤高校钜惠活动 NEW 天翼云息壤杯高校AI大赛,数款产品享受线上订购超值特惠
  • 天翼云电脑专场 HOT 移动办公新选择,爆款4核8G畅享1年3.5折起,快来抢购!
  • 天翼云奖励推广计划 加入成为云推官,推荐新用户注册下单得现金奖励
免费活动
  • 免费试用中心 HOT 多款云产品免费试用,快来开启云上之旅
  • 天翼云用户体验官 NEW 您的洞察,重塑科技边界

智算服务

打造统一的产品能力,实现算网调度、训练推理、技术架构、资源管理一体化智算服务
智算云(DeepSeek专区)
科研助手
  • 算力商城
  • 应用商城
  • 开发机
  • 并行计算
算力互联调度平台
  • 应用市场
  • 算力市场
  • 算力调度推荐
一站式智算服务平台
  • 模型广场
  • 体验中心
  • 服务接入
智算一体机
  • 智算一体机
大模型
  • DeepSeek-R1-昇腾版(671B)
  • DeepSeek-R1-英伟达版(671B)
  • DeepSeek-V3-昇腾版(671B)
  • DeepSeek-R1-Distill-Llama-70B
  • DeepSeek-R1-Distill-Qwen-32B
  • Qwen2-72B-Instruct
  • StableDiffusion-V2.1
  • TeleChat-12B

应用商城

天翼云精选行业优秀合作伙伴及千余款商品,提供一站式云上应用服务
进入甄选商城进入云市场创新解决方案
办公协同
  • WPS云文档
  • 安全邮箱
  • EMM手机管家
  • 智能商业平台
财务管理
  • 工资条
  • 税务风控云
企业应用
  • 翼信息化运维服务
  • 翼视频云归档解决方案
工业能源
  • 智慧工厂_生产流程管理解决方案
  • 智慧工地
建站工具
  • SSL证书
  • 新域名服务
网络工具
  • 翼云加速
灾备迁移
  • 云管家2.0
  • 翼备份
资源管理
  • 全栈混合云敏捷版(软件)
  • 全栈混合云敏捷版(一体机)
行业应用
  • 翼电子教室
  • 翼智慧显示一体化解决方案

合作伙伴

天翼云携手合作伙伴,共创云上生态,合作共赢
天翼云生态合作中心
  • 天翼云生态合作中心
天翼云渠道合作伙伴
  • 天翼云代理渠道合作伙伴
天翼云服务合作伙伴
  • 天翼云集成商交付能力认证
天翼云应用合作伙伴
  • 天翼云云市场合作伙伴
  • 天翼云甄选商城合作伙伴
天翼云技术合作伙伴
  • 天翼云OpenAPI中心
  • 天翼云EasyCoding平台
天翼云培训认证
  • 天翼云学堂
  • 天翼云市场商学院
天翼云合作计划
  • 云汇计划
天翼云东升计划
  • 适配中心
  • 东升计划
  • 适配互认证

开发者

开发者相关功能入口汇聚
技术社区
  • 专栏文章
  • 互动问答
  • 技术视频
资源与工具
  • OpenAPI中心
开放能力
  • EasyCoding敏捷开发平台
培训与认证
  • 天翼云学堂
  • 天翼云认证
魔乐社区
  • 魔乐社区

支持与服务

为您提供全方位支持与服务,全流程技术保障,助您轻松上云,安全无忧
文档与工具
  • 文档中心
  • 新手上云
  • 自助服务
  • OpenAPI中心
定价
  • 价格计算器
  • 定价策略
基础服务
  • 售前咨询
  • 在线支持
  • 在线支持
  • 工单服务
  • 建议与反馈
  • 用户体验官
  • 服务保障
  • 客户公告
  • 会员中心
增值服务
  • 红心服务
  • 客户支持计划
  • 专家技术服务
  • 备案管家

了解天翼云

天翼云秉承央企使命,致力于成为数字经济主力军,投身科技强国伟大事业,为用户提供安全、普惠云服务
品牌介绍
  • 关于天翼云
  • 智算云
  • 天翼云4.0
  • 新闻资讯
  • 天翼云APP
基础设施
  • 全球基础设施
  • 产品能力
  • 信任中心
最佳实践
  • 精选案例
  • 超级探访
  • 云杂志
  • 分析师和白皮书
  • 天翼云·创新直播间
市场活动
  • 2025智能云生态大会
  • 2024智算云生态大会
  • 2023云生态大会
  • 2022云生态大会
  • 天翼云中国行
天翼云
  • 活动
  • 智算服务
  • 产品
  • 解决方案
  • 应用商城
  • 合作伙伴
  • 开发者
  • 支持与服务
  • 了解天翼云
    • 关系数据库SQL Server版
    • 企业主机安全
    • 云防火墙
    • CDN加速
    • 物理机
    • GPU云主机
    • 天翼云电脑(政企版)
    • 天翼云电脑(公众版)
    • 云主机备份
    • 弹性云主机
      搜索发现
      关系数据库SQL Server版企业主机安全云防火墙CDN加速物理机GPU云主机天翼云电脑(政企版)天翼云电脑(公众版)云主机备份弹性云主机
    • 文档
    • 控制中心
    • 备案
    • 管理中心
    • 登录
    • 免费注册

    谈谈微前端

    首页 知识中心 其他 文章详情页

    谈谈微前端

    2025-03-26 09:33:14 阅读次数:5

    iframe,前端,应用,路由,隔离

    相关问题

    • 为什么要用微前端
    • 微前端的优缺点

    回答关键点

    独立开发 独立运行 独立部署 自治

    微前端是一种架构理念,它将较大的前端应用拆分为若干个可以独立交付的前端应用。这样的好处是每个应用大小及复杂度相对可控。在合理拆分应用的前提下,微前端能降低应用之间的耦合度,提升每个团队的自治能力。

    目前市面有各类不同的微前端方案,但没有完美的解决方案。微前端方案通常需要考虑:应用加载机制、通信机制、代码隔离机制等问题。

    知识点深入

    谈谈微前端

    微前端使用场景

    前端工程化中,一个前端项目常以组件或模块的粒度进行代码拆分,然后通过 script 标签、npm 包、submodules 或者动态加载(Dynamic import)等形式将代码集成到项目中。而微前端则是以更大的粒度对代码进行上下文划分,将较庞大的应用拆分成多个技术栈独立的应用,再通过技术手段将若干应用集成在一个容器内。

    如果项目中存在以下问题,可参考微前端架构进行优化:

    • 存量系统如何渐进式地拥抱新技术:存量系统的技术栈老旧,重构和开发成本高。在做新的功能开发时可以考虑采用与老项目不同的技术栈,通过微前端的方案将新的功能与老系统进行集成。同时微前端架构也给老旧系统的技术升级和平滑迁移提供保障。
    • 大型系统的开发及沟通成本上升:通过分析业务功能,将系统拆分成多个独立子系统,使每个子系统能独立开发、运行及部署。将工程复杂度拆分并限制在子系统单元内。避免随需求迭代,项目维护成本增大,跨部门沟通困难导致效率低下等问题。

    微前端部分核心能力

    1. 路由管理

      一般我们使用 Hash 或者 History 模式来对路由进行监听,如 hashchange 或 popstate 事件。

      目前常见的微前端解决方案主要是路由驱动的。在微前端的基座,进行子应用的路由注册,如 { path: '/microA/*' } ,基座根据路由匹配情况,按需挂载子应用。具体路由跳转规则由子应用接管响应。

    2. 隔离机制

      支持样式隔离和 JS 沙箱机制,以保证应用之间的样式或全局变量、事件等互不干扰。在应用卸载时,应当对子应用中产生的事件、全局变量、样式表等进行卸载。

      对于新的项目,做好样式隔离的方式包括采用 CSS Module、CSS in JS 或规范使用命名空间等。对于已有项目的 CSS 隔离,可以在打包阶段利用工具(如 postcss)自动对样式添加前缀。

      实现 JS 沙箱机制可以借助 Proxy 和 with 的能力,分别做对 Window 对象的访问进行拦截和修改子应用作用域的操作。不支持 Proxy 的宿主环境,可以采用快照的思路:对进入子应用前的 Window 对象进行快照,用于后续卸载子应用时还原 Window 对象;在卸载子应用时对 Window 对象进行快照,用于后续再次加载子应用时还原 Window 对象。

    3. 消息通信

      合理划分应用,可以避免频繁的跨应用通信。同时应当避免子应用之间直接通信。

      常见的消息通信机制可以通过原生 CustomEvent 类实现,子应用通过 dispatchEvent 和 addEventListener 来对自定义事件进行下发和监听。除此之外,借助 props 通过主应用向子应用传参,达到通信目的也是常见方法。

    4. 依赖管理

      常见的微前端框架中,基座应用统一对子应用的状态进行管理。根据路由和子应用状态,按需触发生命周期函数,做请求加载、渲染、卸载等动作。而多个子应用间可能存在一些公共库的依赖。

      为减少这类资源的重复加载,通常可以借助 webpack5 的 Module Federation 在构建时进行公共依赖的配置,实现运行时依赖共享的能力。除了使用打包工具的能力,也可以从代码层面通过实现类 external 功能对公共依赖进行管理。

    关联技术

    1. Web Components
      Web Components 允许开发者不借助框架,实现一些可重用的自定义组件。构建一个 Web Components 通常使用到 customElements、Shadow DOM 的 API,和 templates、slot 标签。

      基于 Web Components 开发,可以天然契合微前端的一些特性:技术栈无关,应用间隔离。但兼容性较差,不支持 IE。

    2. iframe
      iframe 常用于将应用嵌入另一个宿主应用中。这其实已经是一种微前端的思维。只使用 iframe 方案引入子应用的好处是浏览器兼容性强,接入成本低,样式及脚本天然隔离。但是由于 iframe 和宿主应用完全隔离,各自独立运行,导致了诸多限制,如:

    • 资源无法共享;
    • iframe 中的 UI 无法跨越 iframe 窗口边界;
    • 刷新页面时 iframe 中的路由状态丢失;

    目前腾讯提供了一个新的微前端实施思路:借助 ShadowRoot 渲染子应用的 DOM;iframe 负责运行子应用的 JavaScript 代码,从而实现 JS 沙箱和 CSS 隔离能力。另外,在保证子应用和主应用同源的前提下,将子应用的路由变化同步到主应用中,从而保证刷新页面后,路由地址正常。

    1. webpack5 Module Federation
      目前市面上的微前端方案中,有基于 Module Federation 的微前端框架实践。Module Federation 是 webpack 提供的一个插件,他支持通过配置以下核心参数,在打包构建阶段确定集成策略:
    • exposes 参数,指定应用可以描述当自己作为被加载的远程模块时,可暴露给其他应用使用的模块路径。
    • remotes 参数,指定应用可以从远端加载的远程模块地址。
    • shared 参数,指定应用可以与其他远程模块共享的依赖(精确到版本)。
    版权声明:本文内容来自第三方投稿或授权转载,原文地址:https://blog.csdn.net/qq_34574204/article/details/137875161,作者:大莲芒,版权归原作者所有。本网站转在其作品的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如因作品内容、版权等问题需要同本网站联系,请发邮件至ctyunbbs@chinatelecom.cn沟通。

    上一篇:用户登录流程详解

    下一篇:高阶函数、高阶组件以及柯里化的理解

    相关文章

    2025-04-22 09:28:31

    springboot实现图片或者其他文件回显功能

    springboot实现图片或者其他文件回显功能

    2025-04-22 09:28:31
    前端 , 接口 , 文件 , 路径
    2025-04-22 09:28:19

    Vue3中如何安装和配置静态路由

    Vue3中如何安装和配置静态路由

    2025-04-22 09:28:19
    router , 路由 , 跳转 , 配置 , 页面
    2025-04-22 09:28:19

    Vue3中如何实现动态菜单递归

    Vue3中如何实现动态菜单递归

    2025-04-22 09:28:19
    实现 , 组件 , 菜单 , 路由 , 递归
    2025-04-18 08:02:02

    django从入门到实战(一)——路由的编写规则与使用

    在 Django 中,路由(URLconf)是将 URL 映射到视图函数的机制。它允许我们定义网站的 URL 结构,并将请求分发到相应的处理函数。

    2025-04-18 08:02:02
    Django , post , URL , 使用 , 示例 , 视图 , 路由
    2025-04-18 07:10:44

    使用shell脚本在Linux中管理Java应用程序

    在日常开发和运维工作中,管理基于Java的应用程序是一项基础且频繁的任务。

    2025-04-18 07:10:44
    jar , Java , Shell , 应用 , 操作 , 目录 , 脚本
    2025-04-18 07:10:30

    React之withRouter的作用和应用

    React之withRouter的作用和应用

    2025-04-18 07:10:30
    history , math , props , 组件 , 路由 , 跳转
    2025-04-18 07:09:19

    Java学习路线指南

    Java作为一种广泛使用的编程语言,不仅应用在Web开发、移动应用、企业级系统等领域,还在大数据、人工智能等前沿领域占有重要地位。由于其跨平台的特性和强大的社区支持,Java成为许多开发者入门编程或转向高级开发的首选语言。

    2025-04-18 07:09:19
    Java , JVM , 代码 , 学习 , 应用 , 开发 , 数据类型
    2025-04-14 08:45:36

    【Kafka】集成案例:与Spark大数据组件的协同应用

    Apache Kafka 是一个分布式流处理平台,主要用于构建实时数据管道和流式应用。Kafka 由 LinkedIn 开发,并于 2011 年开源,目前由 Apache 软件基金会进行管理。它以高吞吐量、低延迟和可扩展性著称。

    2025-04-14 08:45:36
    Kafka , Spark , 实时 , 应用
    2025-04-11 07:11:40

    读Java实战(第二版)笔记13_Java模块系统

    读Java实战(第二版)笔记13_Java模块系统

    2025-04-11 07:11:40
    Java , 子句 , 应用 , 模块 , 访问 , 路径
    2025-04-11 07:08:26

    探索 CodeWave低代码技术的魅力与应用

    在当今快速发展的数字化时代,企业面临着不断增长的应用需求以及对高效开发的迫切需求。低代码技术作为推动数字化转型的强大引擎,正在为企业带来全新的开发模式和效率。

    2025-04-11 07:08:26
    代码 , 企业 , 平台 , 应用 , 开发 , 组件
    查看更多
    推荐标签

    作者介绍

    天翼云小翼
    天翼云用户

    文章

    32777

    阅读量

    4832735

    查看更多

    最新文章

    Vue3中如何实现动态菜单递归

    2025-04-22 09:28:19

    django从入门到实战(一)——路由的编写规则与使用

    2025-04-18 08:02:02

    React之withRouter的作用和应用

    2025-04-18 07:10:30

    python 如何判断一组数呈上升还是下降趋势

    2025-04-09 09:13:17

    深入理解前端路由

    2025-04-01 09:21:49

    laravel5.5 404 \"No query results for model [Ultraware\\Roles\\Models\\Role].\"

    2025-03-31 08:57:48

    查看更多

    热门文章

    VUE前端工程化-2

    2023-02-07 10:34:04

    前端工作小结27-任务+1逻辑

    2023-04-07 06:41:50

    js:json请求和jsonp请求

    2023-02-23 09:20:15

    文件上传 前端写法

    2023-03-30 09:32:51

    Node.js面试题:map(parseInt)

    2023-02-21 06:21:46

    前端工作总结265-跨组件传值

    2023-04-07 06:41:50

    查看更多

    热门标签

    linux java python javascript 数组 前端 docker Linux vue 函数 shell git 容器 spring 节点
    查看更多

    相关产品

    弹性云主机

    随时自助获取、弹性伸缩的云服务器资源

    天翼云电脑(公众版)

    便捷、安全、高效的云电脑服务

    对象存储

    高品质、低成本的云上存储服务

    云硬盘

    为云上计算资源提供持久性块存储

    查看更多

    随机文章

    parseInt和Math.floor有什么不同

    前端-vue基础22-分支循环结构

    前端工作总结284-抽离出新页面优化

    前端项目实战74-子组件向父组件传值

    用ISA Server做×××路由代替专线

    前端工作小结83-当前导致name报错

    • 7*24小时售后
    • 无忧退款
    • 免费备案
    • 专家服务
    售前咨询热线
    400-810-9889转1
    关注天翼云
    • 权益商城
    • 天翼云APP
    • 天翼云微信公众号
    服务与支持
    • 备案中心
    • 售前咨询
    • 智能客服
    • 自助服务
    • 工单管理
    • 客户公告
    • 涉诈举报
    账户管理
    • 管理中心
    • 订单管理
    • 余额管理
    • 发票管理
    • 充值汇款
    • 续费管理
    快速入口
    • 权益商城
    • 文档中心
    • 最新活动
    • 免费试用
    • 信任中心
    • 天翼云学堂
    云网生态
    • 甄选商城
    • 渠道合作
    • 云市场合作
    了解天翼云
    • 关于天翼云
    • 天翼云APP
    • 服务案例
    • 新闻资讯
    • 联系我们
    热门产品
    • 云电脑
    • 弹性云主机
    • 云电脑政企版
    • 天翼云手机
    • 云数据库
    • 对象存储
    • 云硬盘
    • Web应用防火墙
    • 服务器安全卫士
    • CDN加速
    热门推荐
    • 云服务备份
    • 边缘安全加速平台
    • 全站加速
    • 安全加速
    • 云服务器
    • 云主机
    • 智能边缘云
    • 应用编排服务
    • 微服务引擎
    • 共享流量包
    更多推荐
    • web应用防火墙
    • 密钥管理
    • 等保咨询
    • 安全专区
    • 应用运维管理
    • 云日志服务
    • 文档数据库服务
    • 云搜索服务
    • 数据湖探索
    • 数据仓库服务
    友情链接
    • 中国电信集团
    • 189邮箱
    • 天翼企业云盘
    • 天翼云盘
    ©2025 天翼云科技有限公司版权所有 增值电信业务经营许可证A2.B1.B2-20090001
    公司地址:北京市东城区青龙胡同甲1号、3号2幢2层205-32室
    • 用户协议
    • 隐私政策
    • 个人信息保护
    • 法律声明
    备案 京公网安备11010802043424号 京ICP备 2021034386号