Chrome DevTools分析React应用性能：代码高亮异常问题求助

现象原因 #

• 函数定义标绿的核心逻辑：Chrome的代码覆盖率工具是依据代码是否被引擎解析来标记，而非是否被实际调用。如果函数被ES模块导出（哪怕当前页面没用到），或是被赋值给某个对象属性，函数的定义部分（函数名、参数声明）会被JS引擎解析，因此显示绿色；但函数体因为从未被执行，所以标记为红色。
• SVG组件的特殊情况：SVG被打包为React组件时，会生成返回JSX的函数。这个函数的定义会被模块系统处理（解析），但如果该SVG组件未被渲染，函数体内的JSX逻辑就不会执行，进而出现定义绿、函数体红的情况。

解决方法 #

• 排查冗余模块引用：检查未使用的工具函数/SVG是否被其他模块意外导入（比如全局入口、公共组件中引入但未使用），或是采用了import * as utils from './utils'这类整模块导入的写法——这种写法会让模块内所有函数定义被解析，导致绿色标记。
• 完善Tree Shaking配置：确保打包工具（Webpack/Rollup）正确开启Tree Shaking：
  • 代码使用ES模块语法（import/export），避免CommonJS的require
  • 打包模式设置为production（生产模式默认开启Tree Shaking）
  • 避免破坏Tree Shaking的写法：比如将函数赋值给全局对象、使用eval、非按需的动态import
• SVG资源按需处理：使用@svgr/webpack等工具配合按需导入SVG组件，或是采用SVG Sprite方案，只加载当前页面所需的SVG资源，避免打包未使用的SVG组件代码。
• 拆分细粒度模块：将工具函数按功能拆分为更小的模块，避免在单一模块中导出多个函数，减少未使用代码的解析加载。

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