Module Federation与RSBuild动态路由刷新问题的解决方案

问题背景

在使用RSBuild和Module Federation v2构建微前端应用时，开发者经常会遇到动态路由刷新导致页面空白的问题。这个问题特别容易出现在React Router嵌套路由的场景中，当用户刷新子路由页面时，浏览器会尝试从错误的路径加载静态资源。

问题现象

当应用配置了publicPath: 'auto'时，如果访问类似localhost:3001/something/route2这样的嵌套路由并刷新页面，会出现资源加载失败的情况。浏览器会尝试从localhost:3001/something/static/js/...这样的路径加载资源，而不是从正确的根路径加载。

根本原因分析

这个问题源于RSBuild/RSPack在处理动态路由时的资源路径解析机制。当配置publicPath: 'auto'时，Webpack/RSPack会尝试自动确定资源的基础路径，但在嵌套路由场景下，这种自动解析会包含路由路径部分，导致资源路径计算错误。

解决方案

方案一：使用base标签

在HTML的head部分动态添加base标签，强制指定资源加载的基础路径：

<script>
  const base = document.createElement('base');
  base.href = window.location.origin;
  document.head.appendChild(base);
</script>

这种方法简单有效，但需要注意：

1. 必须在所有资源加载前执行
2. 可能会影响页面内其他相对路径的资源

方案二：配置getPublicPath

Module Federation提供了getPublicPath配置选项，可以更精确地控制资源路径：

new ModuleFederationPlugin({
  // 其他配置...
  getPublicPath: () => 'http://localhost:3001/'
})

这种方法更加灵活，可以根据不同环境动态设置路径。

方案三：硬编码publicPath

如果应用部署路径固定，可以直接设置：

output: {
  publicPath: 'http://localhost:3001/'
}

最佳实践建议

1. 开发环境下可以使用base标签方案快速解决问题
2. 生产环境建议使用getPublicPath或硬编码publicPath，更加稳定可靠
3. 对于复杂路由场景，建议统一路由层级，减少嵌套深度
4. 考虑使用环境变量动态设置publicPath，适应不同部署环境

总结

Module Federation与RSBuild/RSPack配合使用时，动态路由刷新问题主要源于资源路径解析机制。通过合理配置publicPath或使用base标签，可以有效解决这个问题。开发者应根据实际项目需求选择最适合的解决方案，确保微前端架构下路由系统的稳定性。