Adblocker
微前端
分享
微前端
WHY
先思考如下两个场景：
1你新入职一家公司，老板扔给你一个 5 年陈的项目，需要你在这个项目上持续迭代加功能。
2你们起了一个新项目，老板看惯了前端的风起云涌技术更迭，只给了架构上一个要求："如何确保这套技术方案在 35 年内还葆有生命力，不会在 3、5 年后变成又一个遗产项目？"5 年都葆有生命力？别说跨框架了，就算都是 react，15 跟 16 都是不兼容的，hooks 还不能用于 class component 。webpack 版本升级。还有 babel、less、typescript 诸如此类。有几个人敢保证自己的项目一年后把所有依赖包升级到最新还能跑起来？
第一个场景，初步一想，只需要把新功能用 react/vue 开发，反正都只是 ui library，给一个dom 节点想怎么渲染怎么渲染。但这只是浮在表层的视图实现，沉在底下的工程设施呢？要怎么把这个用 react 写的组件打出一个包，并且集成到原来的es5代码里？或者怎么让 webpack 跟之前的 grunt 能和谐共存一起友好的产出一个符合预期的 bundle？（开发调试不友好、打包构建复杂、无法独立部署、没有做到技术栈无关）
第二个场景，你如何确保技术栈在 3
针对我们公司，如果当初没有战略合作衍生出的旗舰版，在当下人均技术栈vue/react的大环境中，要如何维护迭代一个主angular的项目。
通过这几个场景，我们可以看出：
这些问题场景的根本原因：前端技术更迭快
企业应用的核心诉求：如何确保我的遗产代码能平滑的迁移，以及如何确保我在若干年后还能用上时下热门的技术栈？
而解决方案微前端的核心价值正是：技术栈无关
微前端架构的好处：
●技术栈无关 主框架不限制接入应用的技术栈，微应用具备完全自主权
●独立开发、独立部署 微应用仓库独立，前后端可独立开发，部署完成后主框架自动完成同步更新
●增量升级 在面对各种复杂场景时，我们通常很难对一个已经存在的系统做全量的技术栈升级或重构，而微前端是一种非常好的实施渐进式重构的手段和策略
●独立运行时 每个微应用之间状态隔离，运行时状态不共享
WHAT\
首页
发现
OO
Z/NNO
OO
首页
分爽
88
购物车
孔
旦
分类
消岛
费器
滋责器
订单
发现
i息
Tiii
购物车
订单
微前端：微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。
拆：微前端首先解决的，是如何解构巨石应用，从而解决巨石应用随着技术更迭、产品升级、人员流动带来的工程上的问题
合：解构之后还需要再重组，重组的过程中我们就会碰到各种 隔离性、依赖去重、通信、应用编排 等问题。
没有用iframe的方式实现了iframe的功能
HOW
\
MicroFrontendArchitecture
SharedStitchingLayer
UsersT
Team
ProductsTeam
AdsTeam
A
APIService
APIService
APIS
Service
BFF
graphal
webserver
将一个应用划分成若干个子应用，将子应用打包成一个个的lib。当路径切换时加载不同的子应用。这样每个子应用都是独立的，技术栈也不用做限制。
Single-SPA：用于前端微服务化的 JavaScript 前端解决方案 (本身没有处理样式隔离， js 执行隔离) 实现了路由劫持和应用加载。
qiankun：基于Single-SPA, 提供了更加开箱即用的 API (singleSpa + sandbox + import-html-entry ) 做到了技术栈无关、接入简单(类iframe)
子应用可以独立构建，运行时动态加载，主子应用完全解耦，技术栈无关，靠的是协议接入(子应用必须导出 bootstrap、mount、unmount方法)
为什么不是iframe?
qiankun接入实现
一、(1)主vue应用编写\
HTML复制代码
1
<el-menu :router="true" mode="horizontal">
2
<el-menu-item index="/">首页</el-menu-item> <el-menu-item index="/vue">vue应用</el-menu-item> <el-menu-item index="/react">react应用</el-menu-item>
3
</el-menu>
4
<router-view v-show="$route.name"></router-view> <div v-show="!$route.name" id="vue"></div>
5
<div v-show="!$route.name" id="react"></div>
(2)注册子应用\
JavaScript复制代码
1
import {registerMicroApps,start} from 'qiankun'
2
const apps = [
3
{
4
name:'vueApp',
5
entry:'//localhost:10000',
6
jscontainer:'#vue',
7
activeRule:'/vue'
8
},
9
{
10
name:'reactApp',
11
entry:'//localhost:20000',
12
container:'#react',
13
activeRule:'/react'
14
} ]
15
registerMicroApps(apps);
16
start();
二、(1)子VUE应用\
JavaScript复制代码
1
let instance = null; function render(){
2
instance = new Vue({ router,
3
render: h => h(App) }).$mount('#app')
4
if(window.__POWERED_BY_QIANKUN__){
5
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
6
}
7
if(!window.__POWERED_BY_QIANKUN__){render()}
8
export async function bootstrap(){}
9
export async function mount(props){render();}
10
export async function unmount(){instance.$destroy();}
(2)打包配置\
JavaScript复制代码
1
module.exports = {
2
devServer:{
3
port:10000,
4
headers:{
5
'Access-Control-Allow-Origin':'*'
6
}
7
},
8
configureWebpack:{
9
output:{
10
library:'vueApp',
11
libraryTarget:'umd'
12
}
13
}
14
}
MORE：
微前端方案，JS隔离，CSS隔离原理等介绍\
1 人点赞
1
2021-12-09 10:57
13
0
React Fiber简介
前端错误监控平台使用说明
正文
⌘ + K链接
\
回复
目录
暂存箱
\
