仅在开发模式下条件加载Jotai DevTools样式的方法

在Vite项目里，利用编译时环境变量import.meta.env.DEV可轻松实现仅在开发环境导入Jotai DevTools及样式，避免生产构建包含多余代码。以下是两种可靠的实现方式：

方式一：入口文件直接条件导入 #

适合全局初始化DevTools的场景：

1. 在项目入口文件（如main.tsx）中添加条件判断：

import { createRoot } from 'react-dom/client';
import { Provider } from 'jotai';
import App from './App';

// 仅开发环境加载DevTools及样式
if (import.meta.env.DEV) {
  import('jotai-devtools/styles.css');
  import('jotai-devtools').then(({ DevTools }) => {
    createRoot(document.getElementById('root')!).render(
      <Provider>
        <DevTools />
        <App />
      </Provider>
    );
  });
} else {
  createRoot(document.getElementById('root')!).render(
    <Provider>
      <App />
    </Provider>
  );
}

方式二：组件内动态加载DevTools #

适合在应用组件中控制DevTools渲染的场景：

// App.tsx
import { Provider } from 'jotai';
import { useState, useEffect } from 'react';

function App() {
  const [DevTools, setDevTools] = useState<React.FC | null>(null);

  useEffect(() => {
    if (import.meta.env.DEV) {
      // 加载DevTools样式
      import('jotai-devtools/styles.css');
      // 动态加载DevTools组件
      import('jotai-devtools').then(module => {
        setDevTools(module.DevTools);
      });
    }
  }, []);

  return (
    <Provider>
      {/* 仅开发环境渲染DevTools */}
      {DevTools && <DevTools />}
      {/* 你的应用内容 */}
      <div>Your App Content</div>
    </Provider>
  );
}

export default App;

原理说明 #

Vite在编译时会将import.meta.env.DEV替换为布尔值：

• 开发环境下替换为true，相关导入和渲染代码会被保留
• 生产环境下替换为false，条件块内的代码会被Tree Shaking完全移除，不会出现在最终构建包中

这样既满足开发时使用DevTools的需求，又不会让生产包包含多余的样式和工具代码。

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