微前端概述

微前端,相信大家都不陌生。简单地说,微前端是把一个大前端应用拆分为多个小应用(子应用),每个可以独立开发、独立部署、独立运行,最后再通过一个"主应用"整合在一起。

结构图

我们给出一个简单的结构图帮助你理解

举个例子

假设一个大型电商网站有多个模块:

  • 首页(使用 Vue)
  • 商品详情页 (使用React)
  • 购物车 (使用Angular)

传统方式:所有模块都在一个单体前端项目中开发和部署。

微前端方式:每个模块是一个独立的前端应用,并可能使用不同的技术栈,比如首页用Vue, 商品业用React。子应用分别由不同团队开发、部署。主应用根据用户的路由加载对应模块。

技术与解决的问题

下面,结合自己所学,列出微前端使用的主要技术,以及技术背后解决的主要问题

解决的问题 技术 简要说明 例子
子应用加载 module/native federation native/module federation都是用来加载远程模块的,只是module federation是webpack提供的,native federation与builder没有关联 federation-demo来自的Angular Architect平台的Module Federation系列
fetch 使用浏览器原生的fetch也能从远程请求子应用资源,比如html,JS,CSS等 京东Mic-App使用fetch加载子应用
应用隔离 shadow DOM 浏览器原生的shadow DOM允许开发者创建隔离的DOM子树,阻止与子应用发生脚本/样式冲突。(Note: 很多库(Angular、React等)组件不能在shadow DOM下很好的渲染,最好采用lit等web component技术框架)
iframe iframe 为子应用提供了独立的 window、document、history、location 腾讯的wujie使用iframe来做子应用隔离
JS sandbox + CSS isolation + DOM isolation 通过window/document的proxy, 还有CSS加前缀类型的方式自行构造沙箱 京东Mic-App
应用通信 postMessage API iframe做隔离的应用之间使用postMessage来通信
JS observable 使用observable来做一个应用间通信的event bus wujie 的 eventBus 通信
Context 这里把存放主应用上下文的容器(比如Angular的Injector,React的Context)与子应用的上下文容器链接起来,从而子应用可以向上检索拿到主应用上下文
window 通过window对象把主应用上下文传入子应用,比如把虚拟路由、event bus、用户授权等 京东Mic-App通过window proxy传入主应用上下文到沙箱中
技术栈差异 Web component 子应用使用不同技术栈或者同一技术栈的不同版本时,把子应用包装成Web component,就可以让主应用做到框架不可知,无需安装多个不同的技术栈

总结

我们简单认识了什么是微前端,实现微前端的一些技术方案,以及他们背后解决的问题。后面的系列文章将会展开每一部分来讲,欢迎跟进阅读。

相关推荐
伍哥的传说34 分钟前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
lichenyang45340 分钟前
Axios封装以及添加拦截器
前端·javascript·react.js·typescript
Trust yourself2431 小时前
想把一个easyui的表格<th>改成下拉怎么做
前端·深度学习·easyui
三口吃掉你1 小时前
Web服务器(Tomcat、项目部署)
服务器·前端·tomcat
Trust yourself2431 小时前
在easyui中如何设置自带的弹窗,有输入框
前端·javascript·easyui
烛阴1 小时前
Tile Pattern
前端·webgl
前端工作日常2 小时前
前端基建的幸存者偏差
前端·vue.js·前端框架
Electrolux2 小时前
你敢信,不会点算法没准你赛尔号都玩不明白
前端·后端·算法
a cool fish(无名)2 小时前
rust-参考与借用
java·前端·rust
只有干货3 小时前
前端传字符串 后端比较date类型字段
前端