模块热更新(HMR - hot module replacement)功能会在应用程序运行过程中,替换、添加或删除模块,而无需重新加载整个页面。主要是通过以下几种方式,来显著加快开发速度:
Rsbuild 已内置了对 HMR 的支持,在开发环境下默认启用。
如果你不需要使用 HMR 能力,可以将 dev.hmr 设置为 false
,此时热更新和 react-refresh 将被禁用,Rsbuild 会自动降级到 dev.liveReload。
如果你需要同时禁用 HMR 和 liveReload,可以将 dev.hmr 和 dev.liveReload 都设置为 false
,此时页面上不会发起 Web Socket 请求到 dev server,也不会在文件变更时自动刷新页面。
在默认情况下,Rsbuild 使用当前页面的 host 和端口号来拼接 HMR 对应的 WebSocket URL。
当出现 HMR 连接失败的情况时,你可以通过自定义 dev.client
配置的方式来指定 WebSocket URL。
默认配置如下,Rsbuild 会根据当前页面的 location 自动推导 WebSocket 请求的 URL:
如果你将一个线上页面代理到本地进行开发,WebSocket 请求将会连接失败。此时你可以尝试将 dev.client
配置成如下值,使 HMR 请求能打到本地的 Dev Server。
请参考 热更新问题。