这里是突然勤快的卓，持续更新文档。本文仅涉及模块联合微前端方案设计层面的分享。具体实现可以参考写的简单例子；所有的设计图都是自己拍的。如果你有一些启发，请点击星号后台团队从瀑布流模式改为敏捷模式，将整个项目团队分成多个团队并行开发，多个团队同时升级的分支处理、代码冲突等问题同时频繁出现。于是接到了群里的技术请求：《模块支持单独升级和部署》。目前我们代码开发维护的现状：一个仓库包含了所有业务组的前端代码，只能一起打包成一个整体包，后端无法单独部署。如上所述已经完成了微服务的拆分，虽然一般场景下【独立开发】和【发布】的问题可以通过git多分支管理来解决，但是当遇到【多个团队同时发布】的场景时】，很头疼：需要拉入各个团队的leader，反复确认能否正常线上线下分支（release-a,release-b,release-ab）的排列组合，防止a团队突然上线失败增加了测试的工作量：本来只接受了一个代码包，现在要验证多个代码包（>1）看看分支模型：既然已经提出了存在的问题，为了解决这些问题，我们意识到整个项目像后端一样被拆分成若干个子应用，它们也都变成了微服务，无法解决目前的困境？很自然地，我们就想到了“微前端”的概念。有了目标，努力就容易了。我们参考了优秀的商业计划书并结合自己的实际情况，最终决定使用webpack5的模块联邦特性来实践和实现微前端。需求分析外部需求拆解，解耦，单独打包，独立部署，不影响当前用户体验内部需求，不影响开发体验方案对原有业务代码有侵入性最低学习成本统一技术栈前端灰度发布方案选择方案：应用微服务，比如qiankun2存在性能问题，沙箱逃逸问题难以解决。放弃小部件化：通过组合多个独立的应用程序和组件来构建单个应用程序。例如，ModuleFederation在接入第三方应用方面存在问题。大，但是对于我们要达到【自主升级】的效果，这个短板可以结合WebComponents。比如微应用在处理沙箱性能和逃逸问题上比方案一好，但是这两个问题还是很难解决，而且目前官方维护频率也没有稳定版本，放弃MPA+路由分发等同于拆分原系统分成多个系统，这在体验上是不能接受的。体验的问题也是不能接受的。放弃纯WebComponents构建应用程序需要用新的基础解决方案重构整个项目的代码。工作量无法接受，最终方案2：放弃模块联合。微前端实践通过对方案的分析，结合项目实际情况，我们确定了微前端的整体方案，并输出了组件图，如下图所示：整个方案很简单：按照开发团队拆分路由层，整个系统可以分为两部分：baseapplication：用于管理子应用路由切换，注册子应用路由和全局Store层，提供globallibraryandreuselayersub-application：用于开发子应用业务代码，一个子应用对应一个开发团队，管理自身路由、语言包、embedding、Storebaseapplication和子应用的桥梁是入口文件：remoteEntry.js。这允许停靠应用程序准确地发现要加载的子应用程序资源的路径。因为依赖remoteEntry.js关联，所以这个文件不会加hash后缀，这就需要所有具名文件都设置协商缓存，不再是强缓存。微前端下的架构变化经过对整个方案的改造，我们项目的整体架构变成了如下图所示：前端端的代码根据应用的特点拆分成若干个子应用group：每个子应用只有自己相关的Code，基础应用可以看做是一个特殊的子应用，提供工程能力，最好不要有业务代码将应用代码划分到packages/apps中文件，通过monorepo+pnpm管理并依赖所有文件夹单独使用Docker+Kubernetes打包构建一个单独的容器（红色部分的所有子应用都是单独的容器）成为真正的微服务加载子应用不同容器之间的资源通过ingressroute+nginx上面的改动使得拆分后的子应用除了独立开发-维护-发布之外，还m使得我们前端应用升级的灰度-部署-回滚操作更加简单快捷。部署方案实现独立部署上线后，所有子应用都是独立的，发布不需要依赖任何应用。您只需要确认开发修改了哪些子应用代码，然后升级对应的子应用即可。具体流程：开发修改A应用代码，上传库打包平台（千流，公司自建），识别具体改动的代码路径，打包A应用，生成镜像容器，版本号等，并推送到镜像平台进行升级虽然是对应服务的步骤，但开发者只需要提供本次升级的版本号（1.0.xxx）即可，背后的过程无需深入了解。回滚方案受益于Docker+Kubernetes，前端回滚只需要执行一个helm命令。没有其他内容。总结总的来说，我们实现了以下目标：[x]代码拆分解耦[x]单独打包，独立部署[x]不影响当前用户体验：不引入其他库，不使用iframe[x]不影响开发体验：支持热更新[x]对原有业务代码侵入最小的方案：核心工作量是代码拆分，webpack的配置工作量不大[x]学习成本低：基本上无学习成本[x]统一技术栈：原本是一个项目[x]前端灰度发布学习链接感谢下文作者/团队分享文章，提供了很好的思路。ModulefederationPrincipleResearchRevolutioningMicroFrontendswithWebpack5,ModuleFederationandBitHowtoBuildaMicroFrontendwithWebpack'sModuleFederationPluginWebpackModuleFederationModuleFederationExampleshttps://medium.com/@A__G__B/i...EMP-面向未来的微前端解决方案正式开源！微应用介绍可能是你见过最完整的微前端解决方案。字节跳动如何落地微前端？微前端在美团外卖的实践中已经看到这里了。请给我一个赞~
