微前端-MFE

每天一个前端小知识 Day 17 - 微前端架构实战与 Module Federation

微前端架构实战与ModuleFederation为什么要微前端？

·2025-07-27 21:09

语义层+白标SDK：衡石SENSE 6.0如何实现行业解决方案的零代码嵌入？

解耦式架构设计、CSS变量引擎与微前端沙箱的技术实践引言：ISV的嵌入困境与衡石破局行业ISV（独立软件开发商）在整合分析能力时面临三重阻碍：定制成本高：每适配新客户需重写数据管道与UI，占开发成本60%

zandy1011·2025-07-25 22:00

微前端MicroApp框架

核心特性简单易用MicroApp的设计理念是尽可能降低使用门槛，只需少量的配置即可快速搭建微前端应用。

史一试·2025-07-25 12:21

前端面试专栏-工程化：29.微前端架构设计与实践

前端面试通关指南专栏主页前端面试专栏规划详情微前端架构设计与实践一、微前端核心概念与价值随着前端应用规模扩大，单页应用（SPA）逐渐面临"巨石应用"问题：代码体积膨胀、团队协作冲突、技术栈锁定、发布周期长

爱分享的程序员·2025-07-24 19:54

react17更新哪些新特性

以下是React17的核心更新内容和特性：核心特性概览1.逐步升级支持（GradualUpgrades）React17的最大亮点是允许多个React版本在一个页面中共存，这对大型项目逐步迁移或微前端架构非常有用

·2025-07-24 11:02

Vue3 业务落地全景：脚手架、权限、国际化、微前端、跨端与低代码 50 条实战心法

写给架构师、TL、全栈工程师的“踩坑地图”（零）阅读指南•不贴源码，用伪代码+流程图+决策树。•50条心法分6大篇章，可跳跃阅读。（一）脚手架与工程化8条心法1：用create-vue而不是vue-cli开启新项目，Vite冷启动300msvsWebpack30s。心法2：eslint-config-prettier+@vue/eslint-config-typescript一键集成，团队争议减少

代码老y·2025-07-24 00:46

聊聊 iframe：网页中的“窗口”是怎么回事？

今天就来聊聊iframe的前世今生、怎么用、包括srcdoc的妙用，它在微前端、传统后端开发、打印场景、通信机制中的应用，以及如何防止别人用iframe内嵌你的网站，尽量说得自然又接地气。

结城·2025-07-23 04:12

TypeScript 完全指南：实战与前沿技术深度解析

一、企业级项目架构1.微前端架构的类型治理随着微前端架构在大型项目中普及，多团队协作开发的类型统一成为难题。想象一个电商平台，购物车、商品详情等模块由不同团队开发，若类型不一致，数据交互时极易出错。

老三不说话、·2025-07-22 02:12

2025年前端 Vue 开发工程师完整技术路线

）1.基础语言与工具2.Vue3基础3.实践项目二、进阶阶段（中级）1.Vue深度掌握2.工具链与工程化3.网络请求与接口联调4.实践项目三、高级阶段（专家级）1.高级Vue技术2.性能与安全优化3.微前端与架构设计

Mr.小海·2025-07-20 05:59

svg图标引发的思考：想晋升高级？这些得了解。

然后当好几个项目改造为对接微前端的时候，发现有些样式冲突了（千万不要小看样式问题（看似简单的问题），往往背后藏着不少值得深挖的学问）复现步骤：先在微前端中打开A项目，图标颜色是正确的。

·2025-07-08 20:17

Web前端工程化

核心组成部分1.模块化开发JavaScript模块化：CommonJS、AMD、ESModuleCSS模块化：CSSModules、CSS-in-JS组件化：Vue/React/Angular组件体系微前端

·2025-07-08 10:32

乾坤微前端框架详细使用大全

引言乾坤微前端框架（Qiankun）是一款轻量级的微前端解决方案，它基于JavaScript的Proxy特性和WebComponents技术，提供了一套简单易用的微前端实现方案。

不知名靓仔·2025-07-08 07:05

qiankun 微前端框架子应用间通信方法详解

qiankun作为流行的微前端解决方案，提供了多种子应用间通信的方式。

啃火龙果的兔子·2025-07-08 06:04

前端微前端架构的探索与实践

前端微前端架构的探索与实践关键词：微前端、前端架构、模块化、独立部署、团队协作、技术栈隔离、渐进式迁移摘要：本文将深入探讨微前端架构的概念、原理和实践。

大厂前端小白菜·2025-06-29 21:35

驾驭代码之道：JS/TS SOLID面向对象设计的五大黄金法则

本文不仅系统阐释单一职责、开闭、里氏替换、接口隔离和依赖倒置五大原则的核心精髓，还结合当今流行的AI智能辅助、微前端、低代码开发等新技术与新思维，深入剖析它们在实际JS/TS项目中的应用场景和最佳实践。

领码科技·2025-06-29 21:59

【架构篇】微前端架构设计与qiankun实战

【架构篇】微前端架构设计与qiankun实战阅前必看：本文是《前端开发完全指南》系列的第十七篇，包含15个核心代码示例、8张系统架构图解、2个企业级落地案例。

全息架构师·2025-06-28 02:57

【Vue】微前端架构与Vue（qiankun、Micro-App）

个人主页：Guiat归属专栏：Vue文章目录1.微前端架构概述1.1什么是微前端1.2微前端的核心价值1.3微前端的实现方式2.qiankun框架详解2.1qiankun简介2.2qiankun的核心特性

Guiat·2025-06-27 10:44

《打破微前端困局：样式冲突与资源隔离破局指南》

微前端架构凭借其独特优势，正逐渐成为众多大型项目的首选架构模式。它将一个庞大的前端应用拆解为多个相对独立的子应用，每个子应用可以独立开发、部署和维护，极大地提升了开发效率与团队协作的灵活性。

程序猿阿伟·2025-06-26 18:15

微前端MFE: 通过共享模块通信（模块联邦Module Federation）

背景传统微前端中，不同子应用彼此完全独立，通信主要通过事件、消息总线等方式。

crary,记忆·2025-06-22 10:24

微前端架构下的组件设计：跨团队协作的解决方案

微前端架构下的组件设计：跨团队协作的解决方案关键词：微前端架构、组件设计、跨团队协作、解决方案、前端开发摘要：本文围绕微前端架构下的组件设计展开，详细探讨了如何通过合理的组件设计来解决跨团队协作中遇到的问题

大厂前端小白菜·2025-06-22 10:51

Python实例题：基于微前端架构的企业级应用平台

目录Python实例题题目问题描述解题思路关键代码框架难点分析扩展方向Python实例题题目基于微前端架构的企业级应用平台问题描述开发一个基于微前端架构的企业级应用平台，包含以下功能：主应用框架：负责路由

狐凄·2025-06-21 18:09

从架构到实战：企业级微前端架构深度实践与落地指南（Vue3 + React + Angular）

从架构到实战：企业级微前端架构深度实践与落地指南（Vue3+React+Angular）文章简介在现代前端工程中，随着系统规模与团队数量的增长，单体应用已难以满足敏捷开发与部署的需求。

·2025-06-20 00:31

MFE微前端：如何捕捉远程应用的remote.js加载失败的错误？

在使用module-federation中的loadRemoteModule时，如果模块加载失败（比如远程应用不可访问、模块不存在、网络问题等），通常会遇到类似Uncaught(inpromise)的错误。这类错误是异步的Promise错误，因此需要用try...catch或.catch()来捕捉。✅错误捕捉方式（推荐使用try...catch）如果使用的是async/await方式来调用load

crary,记忆·2025-06-19 12:58

MFE微前端：共享模块的那些事

避免远程项目（remote）和主项目（host）的依赖重复加载，是微前端（MFE）架构中的核心优化之一。

·2025-06-19 12:58

前端开发：Vue.js 与微前端的集成方案

前端开发：Vue.js与微前端的集成方案关键词：Vue.js、微前端、前端架构、模块化开发、组件化、单页应用、前端工程化摘要：本文深入探讨了Vue.js框架与微前端架构的集成方案，分析了现代前端开发中面临的复杂性问题及其解决方案

前端视界·2025-06-19 11:55

MFE微前端高级版：Angular + Module Federation + webpack + 路由（Route way）完整示例

在查看这篇文章之前，可以先简单预览一下这篇基础版的博客：MFE微前端基础版：Angular+ModuleFederation+webpack+路由（Routeway）完整示例-CSDN博客这篇Angular

crary,记忆·2025-06-19 11:24

如何通过 noindex 阻止网页被搜索引擎编入索引？

优化之站点地图sitemap个人建站做SEO网站外链这一点需要注意，做错了可能受到Google惩罚一文搞懂SEO优化之站点robots.txt网页常见水印实现方式Node.js中那些常用的进程通信方式浅谈微前端沙箱机

村头的猫·2025-06-15 17:54

input六位验证码，输入自动跳到下一格，删除自动回退到上一格

卑微前端提出验证码换成横线输入，结果惨败，好吧确实格子好看…555，开始研究光标定位1.先在页面摆六个输入框确定exportdefault{data(){return{validForm:{num1:'

不吃香菜的蟹老板·2025-06-15 16:17

微前端架构的设计？微前端是为了解决哪些问题？如何解决css同名问题？

微前端架构的设计和核心问题解决方案如下：一、微前端架构设计1.核心设计原则设计原则说明应用拆分将巨型单体应用拆分为独立子应用（微应用），每个子应用可独立开发、测试、部署技术栈无关支持不同子应用使用React

尘寰ya·2025-06-14 23:42

MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释

以ModuleFederation插件详为例，Webpack.config.js它可能的配置和含义如下：前言ModuleFederation的Webpack.config.js核心配置包括：name+filename（定义应用标识）remotes（引用远程模块）exposes（暴露本地模块）shared（共享依赖，优化加载）Host应用中：//host/webpack.config.jsconst

crary,记忆·2025-06-11 19:03

MFE微前端基础版：Angular + Module Federation + webpack + 路由（Route way）完整示例

1.项目结构microfrontend-demo/├──shell/#主应用(Shell)├──mfe1/#微前端应用1├──mfe2/#微前端应用2└──shared/#共享库2.主应用(Shell)

crary,记忆·2025-06-11 19:03

基于qiankun搭建ng-alain15微前端项目入门实践

基础环境实践日期：2023-02-22ngversionAngularCLI:15.1.6Node:18.14.2PackageManager:npm9.5.0OS:win32x64设置npm镜像源npmconfigsetregistryhttps://registry.npmmirror.com/安装yarn并设置yarn镜像源，实践版本：[email protected]

TodayCoding·2025-06-11 19:02

探索微前端架构：多种实现方式与实践思考

在当今的前端开发领域，微前端架构正逐渐成为热门话题。它借鉴了微服务的理念，将原本庞大的单体前端应用拆解为多个小型前端应用，并能让它们协同工作，就如同一个完整的应用一样。

·2025-06-09 21:56

一文搞懂SEO优化之站点robots.txt

文件放置与生效条件位置强制要求文件名规范空文件处理️4实用配置示例场景1：全站开放抓取场景2：禁止所有爬虫抓取场景3：部分目录限制场景4：针对特定爬虫设置⚠️5关键注意事项最后近期文章：网页常见水印实现方式Node.js中那些常用的进程通信方式浅谈微前端沙箱机制实现篇

村头的猫·2025-06-09 13:39

微前端 - Module Federation使用完整示例

Angular框架中项目结构main-app/src/app/app.module.tsapp.component.tsmicro-app/src/app/app.module.tsapp.component.ts主应用配置安装必要依赖：ngadd@angular-architects/module-federation修改webpack.config.js：const{share,SharedM

crary,记忆·2025-06-08 19:59

vue3+qiankun+vite搭建微前端服务

因业务需要搭建一套微前端服务,阅读文档时发现qiankun与vite无法一起使用,需要引入额外插件才可以一起使用,在这里记录下qiankun基座配置1.修改index.html中div的id,并在main.js

LD喂！·2025-06-07 12:28

qiankun.js配置流程及使用过程中遇到的问题分享

我想很大原因还是iframe有很大的局限性，导致很多人选择qiankun这种微前端框架吧。主项目配置这是我自己根据qiankun框架重新搭建了一个项目，公司的项目不适合放到这里。主项目和子项目都是根据

写代码的小王吧·2025-06-07 11:26

qiankun微前端vue3+ts+vite（配置示例）

//主应用main.ts//注册子应用registerMicroApps([{name:'sub_ANALYTICS_APM_SEARCH',entry:'http://localhost:7101/',//子应用地址container:'#sub-container',//子应用挂载容器activeRule:'/controller/#/location=ANALYTICS_APM_SEARCH

湖边看客·2025-06-07 11:54

基于 qiankun + vite + vue3 构建微前端应用实践

核心内容摘要技术栈组合采用Vite+Vue3+Qiankun构建微前端架构主应用和子应用独立开发部署，通过Qiankun集成2.主应用关键配置通过registerMicroApps注册子应用，配置路由匹配规则

MINO吖·2025-06-07 11:53

Vite模块联邦(vite-plugin-federation)实现去中心化微前端后台管理系统架构

提示：记录工作中遇到的需求及解决办法文章目录前言依赖版本要求一、架构设计1.1模块联邦基础概念1.1.1什么是模块联邦1.1.2基本配置示例1.2去中心化微前端架构设计1.2.1传统微前端vs去中心化微前端

·2025-06-06 11:40

Nx与Monorepo

•示例：微前端架构下，主应用与子

老兵发新帖·2025-06-05 13:12

使用 Vue3 + Webpack 和 Vue3 + Vite 实现微前端架构（基于 Qiankun）

在现代前端开发中，微前端架构逐渐成为一种流行的解决方案，尤其是在大型项目中。

指尖上的 Web·2025-06-05 01:40

vue3+ts+vite+qiankun项目配置及部署

#微前端##应用间资源共享##敏捷开发#qiankun部署项目描述主应用:vue3+ts+vite+qiankun微应用:vue3+ts+vite+qiankun路由模式都是History乾坤插件:主应用

法海站如来·2025-06-05 01:40

qiankun微前端——接入子应用Vue3+vite实现

qiankun：乾坤微前端框架什么是微前端Techniques,strategiesandrecipesforbuildingamodernwebappwithmultipleteamsthatcanshipfeaturesindependently

三行代码解决·2025-06-05 01:09

React 微应用接入：qiankun 深度集成实战

以下是用React实现的微前端接入方案，延续前文的工程化架构设计体系：1.React微应用接入核心逻辑//packages/micro-app-react/src/entry.jsimportReactfrom'react

咔咔库奇·2025-05-30 14:19

Web端ER可视化

下面是重构前后对比：重构前重构后功能方面只有逻辑模型层面的ER图包括概念模型、逻辑模型、物理模型3个层面的ER图实现方式单页面、antv/g6微前端、ReactFlow、Elkjs至于为什么前后采用的技术变化这么大

wl_·2025-05-30 12:28

微前端架构设计与实战示例

微前端架构设计与实战示例微前端架构将大型前端应用拆分为多个独立的子应用，实现独立开发、测试和部署，提升应用的可维护性和扩展性。

慧一居士·2025-05-29 16:38

在微前端子应用中会往window上挂载属性，如何避免属性被覆盖？

在微前端架构中，避免多个子应用因往window对象挂载属性导致冲突的问题，可以通过以下方法解决：1.沙箱隔离（核心方案）通过代理（Proxy）或快照（Snapshot）技术，为每个子应用创建独立的全局环境隔离层

尘寰ya·2025-05-28 05:50

【万字总结】前端全方位性能优化指南（一）——Brotli压缩、CDN智能分发、资源合并

GitHubCopilotX和Cursor实现代码生成、实时协作与自动化审查，开发效率提升3倍以上；性能与架构革新，WebAssembly2.0支持多线程与Rust内存优化，边缘计算将渲染延迟压至50ms内，微前端

庸俗今天不摸鱼·2025-05-27 18:36

【微前端】qiankun v2.10.16（流程图）源码解析

整体核心流程源码分析single-spa存在以下主要的缺点路由状态管理不足：无法保持路由状态，页面刷新后路由状态丢失父子应用间的路由交互以来postMessage等方式，开发体验差未提供原生的CSS和JS沙箱隔离，可能导致样式污染或者全局变量冲突默认以来webpack的构建配置，其他构建工具需要改造后才能兼容版本兼容性差，如果使用不同的Vue版本，可能引发冲突仅提供路由核心能力，缺乏多实例并行等微

·2025-05-20 17:05

推荐频道