如何使Create React App项目中组件仅在开发环境编译显示？

CRA（Create React App）内置了环境变量支持，结合条件渲染或动态导入，可以轻松实现组件仅在开发环境存在，生产构建中完全剔除。以下是几种实用方案：

方案一：利用process.env.NODE_ENV条件渲染 #

这是最简单直接的方式，CRA会自动为开发/生产环境设置process.env.NODE_ENV变量——开发环境值为development，生产环境为production。在父组件（如App）中通过条件判断渲染CheatPanel：

import React from 'react';
import CheatPanel from './CheatPanel';

function App() {
  return (
    <div className="App">
      {/* 你的其他业务组件 */}
      {process.env.NODE_ENV === 'development' && <CheatPanel />}
    </div>
  );
}

export default App;

生产构建时，CRA的Tree-Shaking机制会自动移除CheatPanel相关代码，不会出现在最终打包产物中。

方案二：动态导入组件（适合大型组件） #

如果CheatPanel体积较大，可通过动态导入实现仅在开发环境加载组件，生产环境完全不触发导入逻辑：

import React, { useState, useEffect } from 'react';

function App() {
  const [CheatPanelComponent, setCheatPanelComponent] = useState(null);

  useEffect(() => {
    if (process.env.NODE_ENV === 'development') {
      // 开发环境下才加载组件
      import('./CheatPanel').then(module => {
        setCheatPanelComponent(module.default);
      });
    }
  }, []);

  return (
    <div className="App">
      {/* 你的其他业务组件 */}
      {CheatPanelComponent && <CheatPanelComponent />}
    </div>
  );
}

export default App;

方案三：空组件占位（兼容老版本CRA） #

如果担心Tree-Shaking不生效，可在生产环境用空组件替代CheatPanel：

import React from 'react';

// 根据环境导入不同组件
const CheatPanel = process.env.NODE_ENV === 'development'
  ? require('./CheatPanel').default
  : () => null;

function App() {
  return (
    <div className="App">
      {/* 你的其他业务组件 */}
      <CheatPanel />
    </div>
  );
}

export default App;

以上三种方案中，方案一最推荐，代码简洁且CRA的优化机制能确保生产环境完全剔除无用代码。

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