qiankun微前端开发模式父应用频繁崩溃

背景

主应用是vue，使用vue-cli构建，子应用是react，使用create-react-app构建。子应用热更新时，主应用会频繁崩溃。

主应用端口号：8080

子应用端口号：3000

子应用热更新时，主应用会报这个错误

原因分析

0. 由于子工程html是主工程通过fetch请求拉取后，再处理塞入主工程html中。因此在当前服务看来，相当于只有一个8080端口在提供服务。

   

1. 子工程入口文件被打入了热更新的逻辑，导致会发送 ws://localhost:8080/sockjs-node 请求 而不是正常情况下的 ws://localhost:3000/sockjs-node 请求。（有下图分析热更新源码知，默认情况下是根据location.port决定）

   // Connect to WebpackDevServer via a socket.
   var connection = new WebSocket(
     url.format({
       protocol: window.location.protocol === 'https:' ? 'wss' : 'ws',
       hostname: process.env.WDS_SOCKET_HOST || window.location.hostname,
       port: process.env.WDS_SOCKET_PORT || window.location.port,
       // Hardcoded in WebpackDevServer
       pathname: process.env.WDS_SOCKET_PATH || '/sockjs-node',
       slashes: true,
     })
   );
   

解决方法

通过自定义环境变量WDS_SOCKET_PORT为子工程webpack-dev-sercer提供的服务端口号，使子工程正常发送ws://localhost:3000/sockjs-node 请求

# /.env
WDS_SOCKET_PORT=3000

配置了自定义环境变量后，ws请求正常了