Vite 环境变量与生产构建最佳实践：import.meta.env、构建模式与产物优化

console.log(import.meta.env.MODE)          // 当前模式：development / production
console.log(import.meta.env.DEV)           // 是否开发模式（boolean）
console.log(import.meta.env.PROD)          // 是否生产模式（boolean）
console.log(import.meta.env.BASE_URL)      // base 路径（默认 '/'）
console.log(import.meta.env.SSR)           // 是否 SSR

.env                # 所有环境
.env.local          # 本地（不进版本库）
.env.[mode]         # 指定模式（如 .env.production）
.env.[mode].local   # 指定模式本地

优先级（高 → 低）：
.env.production.local > .env.production > .env.local > .env

# .env
VITE_APP_NAME=plume-app
# .env.development
VITE_API_BASE=http://localhost:3000
# .env.production
VITE_API_BASE=https://api.plume.dev
VITE_SENTRY_DSN=https://xxx@sentry.io/1

# .env.staging
VITE_API_BASE=https://staging-api.plume.dev

# 构建命令
vite build --mode staging     # 只加载 .env + .env.staging

// env.d.ts
interface ImportMetaEnv {
  readonly VITE_API_BASE: string
  readonly VITE_SENTRY_DSN?: string
  readonly VITE_ENABLE_MOCK?: 'true' | 'false'
}
interface ImportMeta {
  readonly env: ImportMetaEnv
}

const apiBase = import.meta.env.VITE_API_BASE ?? 'http://localhost:3000'
const enableMock = import.meta.env.VITE_ENABLE_MOCK === 'true'

// 源码
if (import.meta.env.DEV) {
  console.log('debug 面板')
}
// 生产构建后 → 整段被删除（DEV 替换为 false + 死代码消除）

export default defineConfig({
  build: {
    outDir: 'dist',              // 产物目录
    emptyOutDir: true,           // 清空旧产物（默认 true）
    sourcemap: 'hidden',         // sourcemap 策略（见第 7 节）
  },
})

dist/
  index.html
  assets/
    index-3f4k2a.js        # 入口 chunk（带 hash）
    vendor-8d7f2c.js       # 依赖 chunk
    index-1a2b3c.css

export default defineConfig({
  base: '/app/',            // 所有资源 URL 前缀
  // 或 CDN：base: 'https://cdn.plume.dev/app/'
})

默认 '/'：  <script src="/assets/index.js">
base '/app/'：<script src="/app/assets/index.js">

export default defineConfig({
  build: {
    target: 'es2018',                // 浏览器目标（平衡兼容与体积）
    cssCodeSplit: true,              // CSS 按 chunk 拆
    minify: 'esbuild',               // 压缩器（esbuild 快 / terser 更小）
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],   // 手动分 vendor
        },
      },
    },
    reportCompressedSize: true,      // 报告 gzip 尺寸
  },
})

export default defineConfig({
  build: {
    sourcemap: 'hidden',   // 生产推荐：保留映射但不在源码引用
  },
})

生产环境：sourcemap: 'hidden'（不暴露源码，但出错时可配合 Sentry 上传）
监控接入：把 .map 上传到错误监控平台，只保留服务端

npm i -D rollup-plugin-visualizer
# 构建时生成可视化报告
vite build && npx vite-bundle-visualizer
# 或使用 --report 参数（vite 6+）：vite build --report

1. 动态导入拆分大库（echarts、antd 按需）
2. 排查未使用依赖（unimported 检测）
3. 替换大库（moment → dayjs）
4. gzip/brotli 压缩
5. 移除重复依赖（resolve.dedupe）

带 hash 的资源（index-xxx.js）：Cache-Control: immutable（永久缓存）
index.html：Cache-Control: no-cache（实时回源，确保引到新 hash）

// 构建配置配合 CDN
export default defineConfig({
  base: 'https://cdn.plume.dev/',
})

# 构建
vite build
# 上传 dist/ 到 CDN / 对象存储
aws s3 sync dist/ s3://bucket/app --delete
# 或 Vercel/Netlify：根目录 dist，框架预设 vite

✅ VITE_ 前缀隔离密钥，密钥只留服务端
✅ env.d.ts 给自定义变量类型
✅ .env.[mode] 按环境切分，生产用 production 模式
✅ base 配置子路径/CDN
✅ sourcemap: 'hidden' + 监控平台上传
✅ 路由动态导入 + vendor 手动分 chunk
✅ gzip/brotli 压缩 + 带 hash 资源 immutable 缓存
✅ 产物分析确认首屏 < 200KB gzip
✅ 部署前 preview 本地验证