远程模块如何实现开发热更新

本文中热更新是指(模块热替换 - HMR - hot odule replacement) , 会在应用程序运行过程中，替换、添加或删除模块，而无需重新加载整个页面，显著加快开发速度

单个应用的热更新一般开箱即用, 而远程模块的热更新需要根据多个项目的开发环境做一些适配处理, 还没有主流的成熟解决方案

问题表现

https://github.com/wpmjs/examples/tree/main/module-federation-react-hmr 可以克隆这个例子并本地运行

现有app1（localhost:9001）、app2（localhost:9002）、app3（localhost:9003）三个模块, app1作为根应用通过module-federation引入app2和app3, 此时启动三个app的开发环境, 尝试修改本地代码。

• 单独访问每个app的端口并修改对应的代码时页面都会更新

• 直接访问localhost:9001时, 只有修改app1的代码页面才会更新,修改app2和app3的代码页面不会刷新也不会产生变化（websocket成功触发并完成代码更新, react组件未变化）

原因分析

结果为只有最先加载的根应用能够热更新, 其他后续加载的模块无法热更新。原因其实是react的热更新条件比较苛刻:

1. react、react-dom单例

2. react、react-dom是development版本

3. 通过react-refresh向global注册__REACT_DEVTOOLS_GLOBAL_HOOK__

4. react-dom.development获取__REACT_DEVTOOLS_GLOBAL_HOOK__（react-dom会在代码首次执行时获取__REACT_DEVTOOLS_GLOBAL_HOOK__, 所以必须严格按照先加载react-refresh注册hook完毕, 再加载react-dom的顺序, 若顺序错误无法开启热更新, 没有补救措施, 这也是最容易出错且不易排查的一点）

那么前面的例子由于使用了module-federation来共享react和react-dom且都是本地启动的服务, 其实是符合上述条件1和2的。

造成app2和app3无法热更新的原因是 https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/426490f7bf7bf166efc85a0588e5c3b8e64cd72f/client/ReactRefreshEntry.js#L17 这个插件发现global已经存在hook所以未给app2和app3注册, 只有app1成功注册了__REACT_DEVTOOLS_GLOBAL_HOOK__ （顺便提下react-dom.development是直接从全局获取的__REACT_DEVTOOLS_GLOBAL_HOOK__, 所以给每个应用单独注册也不可行）

具体问题可查看这个issue: Component modifications are not applied in module federation · Issue #394 · pmmmwh/react-refresh-webpack-plugin

解决方法

多个模块复用同一个__REACT_DEVTOOLS_GLOBAL_HOOK__:

https://github.com/zhangHongEn/universal-module-federation-plugin/tree/main/packages/single-react-refresh-plugin

vue的热更新集成起来没这么麻烦, 按道理只需要满足vue单例且development版本再加上vue-loader即可, 如果有人遇到类似的问题可以留言

远程模块优化点

通过上面的例子不难发现, 虽然我们有三个模块可以独立构件和发布, 但是开发的时候需要本地启动根应用+远程模块的项目, 如果我们只需要修改1个模块将项目拆解反而是降低效率的。那么更好的办法是能够只本地启动需要调试或修改的模块, 使其能够直接连接到已经部署好的线上或测试环境的资源（可以体验下方搭建好的微前端例子）, 这样就可以真正的做到最小化的独立构建独立发布和独立调试, 来提升项目的开发和部署效率甚至降低发布影响范围。

这种开发方式涉及到如何启动一个远程模块而可以使主应用切换到development版本, 以后单独讲。

微前端

对于这样多个独立构建独立发布的模块组成的应用, 也可以称为微前端。

也可以通过下面的链接体验单独启动远程模块直接链接线上环境来进行开发和调试:

1. 访问微前端根应用demo地址: https://zhanghongen.github.io/universal-module-federation-plugin/

2. clone远程模块mf-app-01: https://github.com/zhangHongEn/universal-module-federation-plugin/tree/main/packages/mf-example/app1

3. npm install && npm run start

4. 启动连接本地的开关

即可看到下图的效果, 一个远程的页面, 页面中的一部分使用了本地启动的组件

上面的微前端页面是使用wpmjs和npm-federation实现的:

https://github.com/zhangHongEn/universal-module-federation-plugin/tree/main/packages/npm-federation-webpack

最后再分享几个微前端相关的技术:

加载器:

• systemjs、module-federation（可以视为主流远程模块加载器）

• wpmjs（版本化加载远程模块, 并且集成了多种模块规范如: umd、system、module-federation）

• npm-federation（以module-federation的方式加载远程npm包的插件, 也可以加载umd包）

技术栈打通:

• vuereact-combined（vue2和react组件互引）
• veaury（vue3和react组件互引）

应用隔离:

• qiankun、micro-app、wujie、single-spa等