web-infra-dev / rspack

The fast Rust-based web bundler with webpack-compatible API 🦀️
https://rspack.dev
MIT License
8.13k stars 484 forks source link

[Feature]: Use 1 HMR websocket connection for mutilple micro-frontend apps in same page #6807

Open coder-czw opened 3 weeks ago

coder-czw commented 3 weeks ago

What problem does this feature solve?

Scene

  1. I have a single page: https://www.abc.com/
  2. Use rspack run 3 micron-frontend in local:
    • main-app in port 8001
    • a1-app in port 8002
    • a2-app in port 8003
  3. Use qiankun.js to load a1-app and a2-app from main-app
  4. Use whistle to proxy https://www.abc.com/ page resource to local
  5. I wrote the proxy on main-app dev-server for a1-app and a2-app ports

Problem

  1. The hmr websocket connections build failed.
  2. Too much websocket connections

What does the proposed API of configuration look like?

I want my sub-apps hmr can access successfully, it will be better that I can use only 1 hmr websocket to update all sub-apps on the same page.

LingyuCoder commented 2 weeks ago

The part of establishing the connection between the client and the server of HMR is not in the webpack/rspack runtime. Usually, they are injected by the dev server. Therefore, different dev servers may have different implementations.

In the future, after rspack 1.0 is stable, we will consider implementing this in rspack-dev-server(internal is webpack-dev-server), but it is not certain whether rspack-dev-server is directly used in qiankun.js. If it is not directly used, the dev server of qiankun.js need to support it too.