网易微前端架构实战:如何管理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,自己也能搞微前端(原理简单)
  • 微前端不仅是技术,更是权限、部署、治理一整套体系
  • 想要稳定运行,必须有主子应用契约 + 灰度发布 + 统一通信策略

尾声:

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

相关推荐
zwjapple18 分钟前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
tan180°2 小时前
MySQL表的操作(3)
linux·数据库·c++·vscode·后端·mysql
像风一样自由20202 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem3 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊3 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
优创学社23 小时前
基于springboot的社区生鲜团购系统
java·spring boot·后端
why技术3 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
幽络源小助理3 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
GISer_Jing3 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止4 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器