如何从Vite生产构建包中移除process.env.NODE_ENV并删除无用代码

1. 替换代码中的process.env.NODE_ENV为Vite原生环境变量 #

Vite不默认支持process.env语法，需要把代码里的环境判断替换成Vite提供的原生变量：

• 直接判断生产/开发环境：用import.meta.env.PROD（布尔值，生产环境为true）或import.meta.env.DEV（布尔值，开发环境为true）
• 获取环境模式字符串：用import.meta.env.MODE（值为"production"或"development"）

示例替换：
原代码：

if (process.env.NODE_ENV === 'development') {
  // 开发环境专属代码
}

替换后：

if (import.meta.env.DEV) {
  // 开发环境专属代码
}

2. 配置vite.config.js强制替换残留的process.env.NODE_ENV #

如果有第三方依赖或遗留代码仍在使用process.env.NODE_ENV，可通过Vite的define选项全局替换，同时开启严格的死代码消除：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  define: {
    // 全局替换process.env.NODE_ENV为当前环境值
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  },
  build: {
    // 选择压缩工具，terser对死代码消除更彻底
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
        dead_code: true // 强制移除不可达的死代码
      }
    },
    rollupOptions: {
      treeshake: {
        moduleSideEffects: 'no-external',
        propertyReadSideEffects: false,
        tryCatchDeoptimization: false
      }
    }
  }
})

3. 配置tsconfig.json确保TypeScript类型正常 #

如果使用TypeScript，需添加Vite的类型声明，避免import.meta.env出现类型报错：

{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}

4. 验证构建结果 #

执行vite build完成生产构建后，检查dist目录下的打包文件：

• 搜索process.env.NODE_ENV确认无残留
• 确认开发环境专属代码已被完全移除

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