qiankun微前端框架介绍

qiankun微前端框架介绍xx什么是微前端？微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。为什么会有微前端?大型单页面应用（SPA）开发效率低，构建速度慢。整合历史系统多团队独立开发，独立部署一个典型的应用用户语言主页菜单登出…应用主体LOGO应用A应用B应用...“友好”的微前端方案技术栈无关接入简单不限制接入应用的技术栈应用之间没有隐性依赖就像iframe一样简单尽可能避免旧应用改造“技术栈无关”为什么重要统一的门户入口项目A一个月前，积极迭代react@16webpack@5less项目B一年前，缺乏维护react@15webpack@3sass项目C三年前，无人维护jquerygulpcss微前端框架的共性问题路由应用的加载和切换应用加载应用入口JS隔离应用的隔离和通信样式隔离父子、兄弟应用通信应用路由主应用/a/*/b/*应用A/a/home/a/user/a/user/:id应用B/b/home/b/list/b/list/:id应用接入：协议接入bootstrapmountunmountAppEntry抉择组合时机JS?应用入口HTML?构建时?运行时?组合时机选择：运行时说明优点缺点构建时子应用与主应用一起打包发布构建时容易做公共依赖提取等优化主子应用构建方案，工具耦合主子应用必须一起发布运行时子应用独立构建运行时动态加载主子应用完全解耦技术栈无关有运行时损耗应用入口选择：HTMLEntry说明优点缺点HTML子应用与主应用一起打包发布构建时容易做公共依赖提取等优化主子应用构建方案，工具耦合主子应用必须一起发布JS子应用独立构建运行时动态加载主子应用完全解耦技术栈无关有运行时损耗bootstrapmountunmount应用隔离：JS沙箱RenderEnvGlobalEnv外部全局环境内部沙箱环境bootstrapmountunmountJS沙箱实现：快照恢复RenderEnvGlobalEnv进入RenderEnv恢复GlobalEnvSnapshot-在应用沙箱挂载/卸载时记录快照-在应用切换时依据快照恢复环境-无法支持多实例应用AJS沙箱实现：代理GlobalEnvEnvAProxy-代理沙箱内部操作，不影响GlobalEnv-将副作用局限在RenderEnv内部应用BEnvB应用隔离：样式隔离<style>

/*子应用样式*/</style><style>/*主应用样式*/</style><style>

/*子应用B样式*/</style><style>

/*子应用A样式*/</style>样式隔离：DynamicStylesheet<style>

/*子应用A样式*/</style><style>/*主应用样式*/</style><style>

/*子应用B样式*/</style><style>/*主应用样式*/</style>子应用A激活子应用B激活切换样式隔离：工程化手段说明优点缺点BEM不同项目用不同的前缀/命名规则避开冲突简单依赖约定，容易出纰漏CSSModules通过编译生产不冲突的选择器名称可靠易用，避免人工冲突只能在构建期使用依赖预处理器与打包工具CSSinJSCSS和JS编码在一起，最终生成不冲突的选择器基本彻底避免冲突运行时开销略缺失完整CSS能力样式隔离：ShadowDOM.main{...}div[data-qiankun-app1].maindiv[data-qiankun-应用名]子应用CSS选择器样式隔离：runtimecsstransformer应用通信优点缺点基于URL完全解耦，应用间独立传递消息能力弱符合URL中心设计的应用少基于CustomEvent弱耦合浏览器原生支持全局命名冲突，缺乏管控复杂情况下通信零碎、散乱基于props通信能力完全自定义主子应用耦合较强新API的学习使用成本全局变量共用Redux-强耦合微前端的两种形态单实例菜单A菜单B菜单C应用主体