React Helmet 6.1.0重载切标签后标题不显示问题咨询

• 项目使用react-helmet 6.1.0管理页面头部元信息，构建工具采用Webpack 5，线上站点地址：https://avoconsulte.com
• 异常复现路径：
  • 页面加载完成后停留在当前标签页时，页面标题可正常展示
  • 重载页面后立刻切换至其他浏览器标签页，原页面会持续保持无标题状态，直到重新切回该标签页，标题才恢复正常
• 核心疑问：该异常是否由Webpack 5引发

该异常和Webpack 5无直接关联，问题根源是react-helmet 6.x的执行逻辑+浏览器后台标签页节流机制共同作用的结果：

• 浏览器为了降低性能消耗，会对非激活状态的后台标签页做主线程任务节流，页面加载阶段如果始终处于后台，低优先级的副作用回调、requestIdleCallback任务会被延后执行，直到标签页被用户激活才会恢复调度
• react-helmet 6.x内部更新document.title、注入meta标签的逻辑，全部放在React组件挂载后的副作用阶段执行，没有做首屏同步更新的兜底。如果页面加载全程处于后台，更新标题的副作用会被浏览器节流阻塞，自然就会出现切回标签页才显示标题的问题
• Webpack 5仅负责项目模块的打包构建，不会干预运行时DOM操作的执行时机，不可能导致这类问题

可以根据项目情况选以下任意一种方案解决：

• 方案1：在项目public目录的HTML模板里直接写死默认的<title>标签作为兜底，react-helmet加载完成后会自动覆盖这个默认值，就算页面在后台加载，也不会出现无标题的情况
• 方案2：将react-helmet替换为维护状态更活跃的react-helmet-async，该版本修复了旧版的副作用时机问题，客户端首屏挂载时会优先同步更新head节点信息，不会被后台标签页的节流机制阻塞
• 方案3：如果不想替换依赖，可以直接在项目入口文件的最顶部加一行同步执行的标题设置代码，优先于React渲染逻辑执行：

// 项目入口文件（如index.jsx）最顶部添加
document.title = '站点默认标题'

后续react-helmet接管页面后会自动替换为各页面的独立标题，不会产生冲突。

内容的提问来源于stack exchange，提问作者Alaa