玩不转微前端就怪这 40 个问题

前端早早聊大会，前端成长的新起点，与掘金联合举办。 加微信 codingdreamer 进大会专属微前端群。

第十二届|前端可视化专场，7-18 直播，10 位讲师(蚂蚁金服/阿里云等)，大会报名地址

本文是第七届 - 微前端专场的部分答疑整理（完整版及视频/PPT 见这里）：

一 、《如何落地微前端一体化运营工作台》--- 侑夕

1.已回答问题

Q:请教侑夕：统一服务网关部分，有考虑到权限管理相关的设计吗？

A: 这一块有考虑的，统一网关服务相当于是工作台的一个统一的接口出入口，不过权限这一块和子应用关系挺大，目前还在设计中

Q:请教侑夕：不能技术栈的子应用怎么加载，相互又怎么隔离？

A: 这一块对于成型的微前端框架已经解决，不过阿里内部几乎都是react体系，对于不同技术栈其实还好

2.未回答问题

Q:请教侑夕：度量能力是指什么？

A: 比如说如何度量你这个系统对于业务的效果，如何度量这次活动的数据效果如何？更像是除了技术之外，我们需要更加考虑技术对于业务的价值

Q:请教侑夕：协议和FormRender的关系是什么？

A: 协议有些像组件的参数，同时参数来控制页面的展示，更多详细可见：github.com/alibaba/for…

Q:请教侑夕：微前端统一（支持主流qiankun和iceStark），这是指什么？

A: 运营工作台应该是可以同时支持加载qiankun、icestark的子应用，无需关注到底用的哪个体系，不过更好的应用于是层框架侧就统一

Q:请教侑夕：飞猪一体化运营工作台中，子应用的规模有多大，在这种规模下是否真的同时存在兼容iceStack和qiankun的需求和场景？

A:子应用相当于是一个业务场景的平台；会存在，但是不多，因为大部分技术规范在一个业务体系下按理是相同的，但是不排除一些老应用或者说是其他团队的应用

Q:请教侑夕：请教你对类Serverless的微前端解决方案怎么看呢？比如opencomponent，piral这两个。他们也号称是Microfrontends。？

A:目前还没有到类似piral微服务这一块，opencomponent，piral 这两个目前在国内貌似还用的不多，我们这边聊serverless和中后台的关系，更像是用serverless替代原有node中后台应用的过程，同时后续借此做一些协议驱动的事情

Q:请教侑夕：微前端将一个项目拆成了几个单独的子项目，那是不是部署的时候之前只需要部署一个，现在却要部署多个，反而增加了运营部署的麻烦？

A: 不一定，拆成多个更便于维护者的维护、同时发布一个也不需要像之前一样全部回归，反而降低了时间，同时发布在我们这边比较快，一个命令解决了，运营部署的麻烦不在发布

Q:请教侑夕：node网关层是只处理转发、免登等等逻辑吗？无脑透明转发，具体的业务逻辑可能放在更后面一层？还是说，这里的网关层也关心业务逻辑，会对每个router进行单独处理？哪种方式会更好一点？

A: 暂时没有关系业务逻辑，不建议网关层过多关注业务逻辑，应该是更向下一层，将业务逻辑消化在子应用中，我个人认为更好解耦便于后续的更长远迭代

二、《如何分三步来探索微前端架构落地》--- 伟林

1.已回答问题

Q:请教伟林：从A子项目切换到B子项，再次进入A项目怎么恢复到切换之前的状态呢？

A: 不建议缓存应用页面，因为全局的事件在切换期间往往会被注销，再切回去恢复比较麻烦。当然如果这些全局性的东西你可以统统管理约束起来，倒是可以尝试一下类似缓存页面的方式，对于老应用来说估计比较麻烦。相对而言，选择缓存数据层或者利用session storage 缓存一些跨应用的状态，以达到快速渲染和恢复的效果较为简单。

Q:请教伟林： 第一，在微前端怎么应用Federation解决路由和store共享吗？第二，怎么把当前的应用升级到Federation？

A: 路由也可以当成一个模块被 exposes，所以是完全ok的。如果需要共享 store，那么将其注册进全局的主应用即可。store 可以被动态注册，取决于你用的状态库，比如 redux，可以利用 replaceReducer。前面讲到如果出现多 store 的情况，可以利用 react-redux 中 connect 的高级用法解决。

迁移 Federation，需要升级 WP5。参照英文官网的 migration guide，一步步来。一般遇到的问题都是 plugin不兼容导致的报错，尝试将其升到最新版本试试。如果还有一些莫名其妙的错误，可以去 WP 的 github issue 里找下，总之问题不大。

补充一下，目前 Federation 还不是特别稳定，文档非常残缺，有些高级API都是和作者交流中才得知的，生产上可以再等等。

Q:请教伟林：使用qiankun插件的时候，子模块某个页面报错了，然后当前模块所有页面都被阻塞了，这个问题有没有好的方式解决呢？

A:像前面说到的 DLL libraryTarget 问题，确实出现子应用报错，然后导致整个挂掉的情况。集成了多个应用其实就是一个整体了，报错就要去对应子应用进行解决，基本在开发阶段就会发现问题。

2.未回答问题

Q:请教伟林：请教发布时的版本号是如何管理的呢？

A: 精细模式里需要开发一个注册中心，打包完成后入口资源（qiankun是index.[hash].html、federation 则是 remoteEntry.[hash].js）需要利用通知接口，告诉注册中心自己最新的版本是什么。版本号就由 WP 自己的content hash 机制去生成就行了，我们不需要关注太多。

Q:请教伟林：微前端动态加载如果远程模块过大，加载会比较久。微前端是否可以使用SSR来解决这个问题呢？

A: 模块较大时，你就需要考虑拆分一下。比如用 federation 时，你可以拆出更细的子模块。SSR 和 federation 也是不冲突的，大家也可以去作者那边看到一些例子。qiankun 应该也是完全是OK的，import-html-entry 去获取 SRR 的页面做渲染，没毛病。补充一点，SSR 也不是最优的，微前端还可以结合 CDN 商的边缘计算能力，做更多的优化。最近淘宝也发了一些和边缘计算在前端应用的文章，大家可以去搜一下。

Q:请教伟林：子应用的入口文件不加hash可以嘛？这样就不用版本管理了,然后使用manifest.json管理其他文件？

A: 前面讲到的要做到平滑上线就必须要全部 hash 化，这样才不会出现彼此上线不匹配导致的问题。其实这和过去是一样的，抽象看子应用也是大应用的一个资源，所以必须 hash 化。

三 、《如何设计微前端的主子应用路由调度》--- 法海

1.已回答问题

Q:请教法海：这种路由设计，怎么处理路由传参？

A: 路由传参和这种路由设计并无强关联；而如果说主子应用之间如何设计路由传参的话，简单的做法是 example.com/{micro-app-name}/{micro-app-route}。

Q:请教法海：子应用是怎么转成一个能接收 iframe 的函数的？

A: 在 build 阶段的最后一步会给子应用的 bundle 包装上一段代码，成为一个函数调用的形式。

Q:请教法海：请教你们这种路由处理方案上线后，刷新后会不会跟vue一样会404（找不到对应的资源），需要配置nginx处理的？

A: 需要配置的，都返回首页 index.html 即可。

2.未回答问题

Q:请教法海：这么专业的时序图用什么工具画的？

A: 使用的是 OmniGraffle，默认带了基本 UML 的元件，可以拿来用。

四 、《如何在大型应用中架构设计微前端方案》--- 鲲尘

1.已回答问题

Q:请教鲲尘：icestark是如何通过劫持路由来判断对应子应用需要加载的资源呢？

A: icestark 是通过路由劫持的方法来监听路由的变化，劫持的内容包括了 history API 中的 pushState 和 replaceState，以及 window 浏览器路由事件 popstate 和 hashChange。一旦路由发生变化后通过劫持拿到 url 变化信息，再根据微应用注册的路由规则进行匹配。如果匹配成功，读取该微应用设置的资源信息进行加载。

Q:请教鲲尘：我也用with实现了沙盒，但是打包的时候，babel会一直报错，严格模式下不允许用with,请教你们怎么解决的？

A: icestark 的沙箱是基于 with + new Function 的形式进行执行，目前没有发现在严格模式下报错的问题，报错的场景可以具体看下。

2.未回答问题

Q:请教鲲尘：组件公用的话，公用组件是放在主应用下嘛？子应用如何去获取？

A: 公用组件依赖还是建议主应用和子应用各自进行依赖，而不是通过主应用共享组件的方式，这样会导致子应用功能依赖外部因素，不管是独立部署运行，还是系统的健壮性都会受到影响

Q:请教鲲尘：使用newFunction执行代码，如果代码有语法错误，怎么定位到报错的位置呢？

A: 目前在沙箱中 debug 的确比较困难，后面会结合 sourceMap 的能力来定位具体的报错

Q:请教鲲尘：从子应用A切换到子应用B，然后又切换到子应用A，怎么恢复到子应用A之前的状态呢？

A: 一般场景下子应用进行切换后，都会重新执行各自的脚本，子应用的状态不会被保留。如果业务上有强烈的诉求可以让子应用在状态更新时同步更新数据到 localstorage 等 web 存储方式，下一次执行初始化的时候可以将数据取出作为初始状态

Q:请教鲲尘：微前端方案在注册多个前端子应用的时候，子应用的版本控制有什么好的方案么？是不是每次都必须加载子应用的最新版本？

A: 推荐的方式肯定是控制子应用的版本，版本控制的方式大的方向可以分为两种：主应用中维护子应用列表和后端接口返回子应用列表。

五 、《如何设计实现微前端框架-qiankun》--- 方涣

1.已回答问题

Q:请教方涣：是否有对于子应用服务异常时，主应用的容灾机制的推荐方法？

A: 这个我觉得是取决于具体场景和业务诉求的。因为子应用异常：一种可能是你代码就写错了，子应用挂了。这种情况下你主应用可能只能感知到子应用出一些异常故障，你知道这个子应用挂了，你可以做一些上报，或者尝试做一些恢复。还有可能你是想做一些监控实践，你想捕获子应用里面运行时的一些错误情况，它是否发生了一些不到崩溃程度的一种报错，你希望把它记录下来。这方面其实 qiankun 本身是不关注这个的，你完全可以自己来实现这些逻辑。

Q:请教方涣：qiankun 框架是否不关心不参与处理微应用之间可能存在的共同依赖，怎么解决公共依赖的问题？

A: qiankun 本身是没有帮助处理公共依赖的。这个事情上，可以通过一些构建时候的工具来解决，比如说像简单的 externals 和一些库，或者说你可以尝试 Webpack5 的联邦模块，或者说是用一些 import map 之类的特性来做这件事情。qiankun 这方面也在探索路上，包括我们也再想自己如何和 Webpack5 的联邦模块结合，我们后续可能会出一些有关这方面的实践。如果你有好的实践欢迎提出来跟大家分享。但是同时我们有另一种观点，你真的需要把这些依赖提出来吗？很多时候你的应用之间的依赖库的版本不同，这些不同的你可以认为依赖库其实也是应用的一部分，你把它提出去之后，其实也是造成了你应用之间的一些耦合。

Q:请教方涣：目前qiankun如何在原有的老项目中，在基座中引入乾坤，主子应用路由如何对接，现有的样式如何隔离？

A: 你的场景应该是已经有一个应用 A，然后你想通过 qiankun 把应用 B 作为一个子应用引入到你的应用 A 中。在这个场景下，其实比较简单的方式是你在应用 A 里面，就是你的主应用里面，单独分配一个路由给应用 B。因为 qiankun 实际上是主应用加载了之后，去检查匹配子应用是否激活。如果子应用激活，我们就会把子应用挂载，然后再去把路由交给自己的子应用。所以这个场景下最简单的方式就是分配一个路由给你的子应用。

样式隔离的问题，其实刚才讲了。可以有两种方式：一种是使用一些工程化的手段，不管是约定前缀，或者说使用 css module 做一些改造都可以避免主子应用之间的样式冲突。你也可以尝试去开启严格的样式隔离，使用Shadow DOM 的方式来让子应用样式真正地做隔离，但是这个时候你的子应用可能会遇到一些新的问题需要你解决。

Q:请教方涣：qiankun子应用是jquery老项目，图片地址是相对路径，加载时图片地址的域名和端口,原本应该是子应用的服务地址,却变成了主应用的地址了，比如原本是"xx:8089/i.jpg",这个地址是对的,但是现在变成了"xx:8080/i.jpg",这样资源就找不到了,要怎么解决这个问题？

A: 有两种方式解决你的问题：1. 将子应用的资源地址改为绝对路径 2. 通过 qiankun 提供的自定义 fetch start({ fetch })，在自定义 fetch 中识别并手动修正子应用资源路径。考虑你的项目比较老，大概率也不是用 webpack 等构建工具打包，可以尝试后者

2.未回答问题

Q:请教方涣：乾坤2.0怎么支持页面内多tab切换的场景?这些tab与路由是一一对应的？

A: 从你的描述中我很难判断你是个单实例场景还是多实例场景。如果你说的是 qiankun@1.x 支持的单实例场景，那么每个子应用往往都有自己独立的路由，它们之间也互不干扰，qiankun 会根据当前路由状况激活对应的子应用，这个时候，你的 tab 的激活条件和子应用的激活条件是一致的，也就是你说的一一对应。如果你说的是多实例场景的话，多实例场景下由于可能同时挂载多个子应用，所以子应用应该是路由无关的，tab 与路由没有关系。

Q:请教方涣：公用组件如何抽取出来？抽取出来是放在主应用下嘛？子应用如何去调用？

A:公共组件抽取看具体场景吧，最基础的 external、webpack5 的联邦模块都是可以采用的抽取方案。抽取出来之后，公共模块可以由主应用复杂加载，子应用可以直接调用（子应用是共享主应用的全局环境的），当然，你也可以在主应用中通过 props、自定义事件等通信方式传递方法给子应用

Q:请教方涣：目前qiankun2.0版本中对于传统项目子项目,路由注册还是需要单独注册每一个html页面吗？

A: 你指的是非 SPA 的场景吗？那确实得每个页面单独注册。

Q:请教方涣：qiankun是如何看待当前浏览器兼容性的处理的，因为目前貌似不支持IE，这样对有些比较传统的国内企业（多数使用IE），开发使用就受限制了？

A: 在没有 Proxy 等高级特性的情况下，qiankun 能做的事情会很受限（比如无法很好的做沙箱隔离），所以我们还是优先支持高版本的浏览器。我们会对 IE 11 提供一些特别支持，尽量让更多的功能在 IE 下也能使用，但你想完整的使用 qiankun 的能力的话，还是劝说用户升级更换好一下浏览器吧。

Q:请教方涣：如果用iframe做沙盒，a是主应用，b是子应用，b在沙盒中隔离，这个时候如果用户调用b中的路由，如何唤醒b中的内容，因为a中没有b的路由，需要远程请教b打包后的bundle，再把b的bundle放在iframe中隔离，之后的过程呢？路由没有在a中找到相应的路由，然后通过a中的某个方法，找到b中的找到相应的代码，渲染？

A: qiankun 不是 iframe。。iframe 下 a 和 b 两个应用的路由是完全独立的，你想做联动的渲染就得自己通过一些通信机制传递消息过去。

别忘了点赞哦

本文使用 mdnice 排版