如何让React减少调用mark函数频次？保留开发环境热重载

你遇到的是React开发模式下的默认行为：为了支持DevTools的组件渲染追踪、性能分析等调试能力，React会自动插入大量performance.mark和performance.measure调用，在大型应用中这类调用会累积出明显的性能开销。以下是几个无需切换到生产模式、同时保留热重载的解决方案：

• 禁用React DevTools的性能追踪
  在应用启动的最早期（比如index.js的最顶部）添加以下代码，关闭DevTools触发的性能标记生成：

  if (process.env.NODE_ENV === 'development') {
    window.__REACT_DEVTOOLS_DISABLE_PERFORMANCE_TRACING__ = true;
  }
  

  如果你用Vite或Webpack，也可以通过构建配置注入这个全局变量：

  • Vite：在vite.config.js的define字段中添加'__REACT_DEVTOOLS_DISABLE_PERFORMANCE_TRACING__': true
  • Webpack：在webpack.config.js的plugins里新增new webpack.DefinePlugin({ __REACT_DEVTOOLS_DISABLE_PERFORMANCE_TRACING__: true })

• 调整React DevTools的设置
  打开React DevTools的设置面板（右上角齿轮图标），找到「Performance」相关选项：

  • 关闭「Record why each component rendered while profiling」
  • 关闭「Highlight updates when components render」
    这些选项会触发额外的性能标记，关闭后能大幅减少performance.mark的调用量。

• 改用React DevTools自带的Profiler调试性能
  既然Chrome常规性能工具中mark函数占比极高，不如直接使用React DevTools内置的Profiler工具。它的采样更聚焦于React组件的渲染流程，不会产生大量全局的performance.mark开销，同时完全兼容开发模式的热重载功能，能更精准定位应用的性能瓶颈。

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