网易微前端架构实战:如何管理100+子应用而不崩

你知道网易有多少个前端项目吗?

超过 1000 个代码仓库、200+子应用、每天发布300次

如果没有一套微前端治理系统,项目早炸了。

今天就来带你拆解网易微前端架构的核心------基座 + 动态加载 + 权限隔离 + 独立发布


一、网易为什么早早就用上了微前端?

因为早年起就有大量频道、游戏门户、社区运营、CMS后台等:

  • 功能多样、团队独立
  • 迭代频繁、部署不可等待
  • 技术栈各异:Vue2、Vue3、React、甚至还有 jQuery...

👇于是他们选择了模块化能力最强的方案:微前端架构(Micro Frontends)


二、整体架构图(网易实战版)

css 复制代码
graph TB
A[主应用(基座)] --> B1[子应用-A(React)]
A --> B2[子应用-B(Vue3)]
A --> B3[子应用-C(Vue2)]
A --> C[公共资源服务 CDN]
A --> D[权限平台接入]
B1 -->|沙箱隔离| A
B2 -->|独立发布| A
B3 -->|动态加载| A

三、主子应用通信怎么做?(网易方案)

网易没有用 qiankun,而是基于内部封装的微前端 SDK,核心原理类似。

javascript 复制代码
// 主应用提供通信桥
window.__MICRO_APP_EVENT_BUS__ = new EventTarget()

// 子应用监听事件
window.__MICRO_APP_EVENT_BUS__.addEventListener('global-refresh', () => {
  window.location.reload()
})

// 主应用触发事件
window.__MICRO_APP_EVENT_BUS__.dispatchEvent(new Event('global-refresh'))

👉这种方式:

  • 不侵入框架(Vue/React 通吃)
  • 不耦合代码,只用浏览器原生事件系统

四、部署与权限如何统一管理?

网易配套了一整套"发布平台 + 权限系统",做到:

功能 说明
独立部署 每个子应用都有独立 Jenkins/流水线
权限接入 每个子应用上线必须绑定角色权限模块
域名配置 主应用统一路由配置,动态注入 iframe 或模块
沙箱运行 子应用运行在 iframe + ShadowDOM + CSP 下,完全隔离

五、实战代码:子应用注册和加载

css 复制代码
// 主应用注册子应用(JSON 配置化)
const microAppList = [  {    name: 'content-manage',    entry: 'https://cdn.xxx.com/apps/content-manage/index.html',    activeRule: '/content'  },  {    name: 'user-center',    entry: 'https://cdn.xxx.com/apps/user-center/index.html',    activeRule: '/user'  }]

// 动态加载示例(简化版)
function loadMicroApp(appConfig) {
  const iframe = document.createElement('iframe')
  iframe.src = appConfig.entry
  iframe.style = 'width:100%;height:100%;border:none'
  document.getElementById('micro-container').appendChild(iframe)
}

六、网易踩过的3个坑(干货!)

解决方案
子应用样式污染 每个子应用编译时加 prefixCls,搭配 ShadowDOM 隔离
子应用登录状态不一致 所有项目统一通过 Cookie + SSO 网关授权
子应用发布顺序冲突 发布系统支持灰度 + 停发自动依赖检查

七、总结:你能从中学到什么?

  • 不要迷信 qiankun,自己也能搞微前端(原理简单)
  • 微前端不仅是技术,更是权限、部署、治理一整套体系
  • 想要稳定运行,必须有主子应用契约 + 灰度发布 + 统一通信策略

尾声:

"你看到的稳定,其实是他们踩了无数坑后的优雅。"

相关推荐
菜鸟una7 小时前
【微信小程序 + map组件】自定义地图气泡?原生气泡?如何抉择?
前端·vue.js·程序人生·微信小程序·小程序·typescript
昔人'9 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
桦说编程14 小时前
深入解析CompletableFuture源码实现(2)———双源输入
java·后端·源码
舒一笑15 小时前
大模型时代的程序员成长悖论:如何在AI辅助下不失去竞争力
后端·程序员·掘金技术征文
lang2015092815 小时前
Spring Boot优雅关闭全解析
java·spring boot·后端
岁月宁静15 小时前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
二宝15215 小时前
黑马商城day4-微服务02
微服务·云原生·架构
小羊在睡觉15 小时前
golang定时器
开发语言·后端·golang
心易行者15 小时前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
用户214118326360216 小时前
手把手教你在魔搭跑通 DeepSeek-OCR!光学压缩 + MoE 解码,97% 精度还省 10-20 倍 token
后端