基于Create React App实现条件编译 剔除生产构建的测试功能

CRA 内置的构建流程原生支持死代码剔除（Tree Shaking），只要按照以下方式配置，就能让测试相关代码在生产构建时被完全删除，不会有任何残留：

第一步：配置环境变量 #

CRA 只会自动注入前缀为 REACT_APP_ 的环境变量到构建上下文，你可以按环境区分配置：

• 在项目根目录的 .env.development 文件中添加：

  REACT_APP_ENABLE_TEST_TOOLS=true
  

• 生产环境对应的 .env.production 文件不要添加该变量，或显式设置为 false

第二步：使用常量表达式做条件判断 #

必须直接用 process.env.REACT_APP_ENABLE_TEST_TOOLS 做判断条件，不要把它赋值给其他变量后再判断，这样 CRA 生产构建用的 Terser 压缩工具才能识别到死代码分支，直接彻底删除。
使用示例：

// 测试相关逻辑全部写到该判断分支内，生产构建会直接删除整段代码
if (process.env.REACT_APP_ENABLE_TEST_TOOLS) {
  // 测试重置逻辑、调试工具、辅助接口等全部放在这里
}

// 组件渲染写法同理
function App() {
  return (
    <div className="app">
      {/* 正式业务代码 */}
      <MainPage />
      {/* 测试按钮仅开发环境存在，生产构建完全移除 */}
      {process.env.REACT_APP_ENABLE_TEST_TOOLS && <TestResetGroup />}
    </div>
  )
}

第三步：添加 TypeScript 类型声明 #

在项目的 react-app-env.d.ts 文件中添加环境变量的类型定义，避免 TS 编译报错：

declare namespace NodeJS {
  interface ProcessEnv {
    REACT_APP_ENABLE_TEST_TOOLS?: string;
  }
}

效果验证 #

执行 npm run build 打生产包后，搜索打包产物不会找到任何测试功能相关的代码字符串，完全没有运行时判断逻辑，不可能出现配置意外开启导致的安全问题。

注意：不要将 process.env.REACT_APP_ENABLE_TEST_TOOLS 赋值给其他变量后再做判断，这种写法可能导致压缩工具无法识别死代码，出现删不干净的问题。

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