Module Federation核心库中动态路由刷新问题的解决方案

问题背景

在使用RSBuild和Module Federation v2构建微前端应用时，开发者遇到了一个典型的路由刷新问题。当应用采用嵌套路由结构时，刷新子路由页面会导致静态资源加载失败，出现白屏现象。这个问题特别容易出现在动态路由和嵌套路由场景中。

问题现象分析

具体表现为：

1. 当访问基础路由（如localhost:3001/something）时刷新页面，应用工作正常
2. 当访问嵌套子路由（如localhost:3001/something/route2）时刷新页面，浏览器尝试从错误路径加载静态资源，导致应用崩溃

错误路径形如：http://localhost:3001/some/static/js/vendors-node_modules...，其中"some"被错误地包含在了资源路径中。

根本原因

这个问题源于RSBuild/RSPack的publicPath配置与React Router嵌套路由的交互问题。当设置为publicPath: 'auto'时：

1. 在开发模式下，Webpack/RSPack会基于当前页面URL自动计算publicPath
2. 对于嵌套路由，自动计算会错误地将路由路径包含在资源URL中
3. 导致静态资源请求发送到错误的路径

解决方案比较

方案一：设置base标签

在index.html中添加以下脚本动态设置base标签：

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

优点：

• 实现简单直接
• 适用于大多数场景

缺点：

• 可能引入其他副作用
• 不是最规范的解决方案

方案二：使用getPublicPath配置

Module Federation提供了getPublicPath选项，可以更精确地控制publicPath的计算：

// 在ModuleFederationPlugin配置中
getPublicPath: `function() {return "http://localhost:3001/"}`

优点：

• 更符合Module Federation的设计理念
• 提供更精细的控制

缺点：

• 需要更深入理解Module Federation工作机制
• 配置相对复杂

方案三：硬编码publicPath

直接设置固定的publicPath：

// RSBuild配置中
output: {
    publicPath: 'http://localhost:3001/'
}

优点：

• 简单可靠
• 适合固定部署环境的场景

缺点：

• 不够灵活
• 不适用于多环境部署

最佳实践建议

对于大多数项目，推荐组合使用以下方法：

1. 保持RSBuild配置中的publicPath: 'auto'
2. 在Module Federation插件中配置getPublicPath函数
3. 对于特殊场景，可以配合使用base标签

同时需要注意：

• 开发环境和生产环境可能需要不同的配置
• 动态路由参数不应影响静态资源路径
• 测试时应覆盖各种路由刷新场景

总结

Module Federation与RSBuild/RSPack的配合使用虽然强大，但在处理复杂路由场景时需要特别注意publicPath的配置。理解各种解决方案的优缺点，根据项目实际需求选择合适的配置方式，可以避免路由刷新时的资源加载问题，确保微前端应用的稳定运行。