生产环境Chrome React DevTools中组件名显示为ComponentName_ComponentName的原因

这个问题我之前排查过好几次，结合你用的是命名导出的无状态函数组件，大概率是生产构建流程里的代码处理逻辑搞的鬼，具体可能有这几个原因：

• 生产环境的代码压缩混淆
  生产构建时，Webpack（搭配TerserPlugin）、Vite这类工具都会对代码做极致压缩，其中就包括对变量、组件名的重命名优化。如果压缩工具在处理你的组件时，检测到存在同名的标识符（比如组件函数名和某个内部变量名重复，或者不同模块里有同名组件），为了避免运行时冲突，就可能生成ComponentName_ComponentName这种重复拼接的名字来做区分。

• Tree Shaking 或导出逻辑的重复处理
  虽然你是用export function ComponentName这种标准命名导出，但如果你的组件文件里存在隐性的重复命名（比如不小心在内部定义了和组件同名的变量），或者构建工具在Tree Shaking过程中把同一个组件的不同引用实例做了区分标记，就可能给组件名加上重复后缀。另外，如果你的组件同时被其他模块通过不同方式引用（比如直接导入和通过中间模块导入），也可能触发这种命名逻辑。

• 构建工具的配置冲突
  比如Webpack的optimization.minimizer里的Terser配置，如果错误开启了keep_classnames但没正确配置keep_fnames，或者Vite的build.minify选项用了terser但自定义了不合理的参数，都可能干扰组件名的保留逻辑，导致奇怪的重复命名。还有一些React优化插件（比如babel-plugin-transform-react-remove-prop-types），如果配置不当也可能影响组件名的识别。

• TypeScript编译的间接影响
  因为你的组件用TS编写，TS编译后的JS代码可能会改变函数的命名形式。比如如果compilerOptions里的preserveSymlinks、declaration等选项和构建工具的压缩逻辑冲突，或者TS编译时给函数添加了额外的标识符，就可能让压缩工具误判，生成重复的组件名。

快速排查建议 #

• 临时关闭生产环境的代码压缩（比如在Webpack里注释掉TerserPlugin，或者Vite里设置build.minify: false），看看组件名是否恢复正常，先确认是不是压缩环节的问题。
• 检查组件文件内部，有没有和组件名同名的变量、函数，避免命名冲突。
• 核对TS的tsconfig.json，确保target、module等编译选项和构建工具的要求兼容，减少编译后的代码歧义。

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