"Vite 5 构建性能优化与多环境配置"

Vite 5 构建性能优化与多环境配置概述Vite 5 以更快的开发服务器与稳定的 Rollup 产物构建为特点。本文提供可验证的优化项与多环境配置示例，适配前后端同构与 SSR 场景。基础配置与依赖预构建// vite.config.ts import { defineConfig, loadEnv } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig(({ mode }) => { const env = loadEnv(mode, process.cwd(), '') return { plugins: [react()], cacheDir: '.vite', optimizeDeps: { include: ['react', 'react-dom'], exclude: ['@scope/heavy-lib'], }, server: { port: Number(env.DEV_PORT ?? 5173) }, } }) 要点：`optimizeDeps` 控制预构建范围；避免将体积巨大的库强行加入预构建导致冷启动延迟。产物分包与输出// vite.config.ts（部分） export default defineConfig({ build: { target: 'es2020', sourcemap: true, rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'], }, }, }, }, }) 通过 `manualChunks` 保持第三方依赖稳定分包，提升长效缓存命中率。SSR 与依赖外部化// vite.config.ts（SSR 相关） export default defineConfig({ ssr: { noExternal: ['your-ssr-safe-lib'], external: ['@scope/heavy-node-only'], }, }) 在 SSR 场景中明确 `external/noExternal`，确保打包边界与运行时兼容。多环境变量管理# .env API_BASE=https://api.example.com # .env.production API_BASE=https://api.example.com # .env.development API_BASE=http://localhost:3000 // 应用代码 const api = import.meta.env.API_BASE 使用 `loadEnv` 与 `import.meta.env` 管理配置差异；避免在代码中硬编码环境常量。验证要点配置项基于 Vite 5 稳定 API；在 React/Vue/Svelte 项目均可直接应用。通过构建分析与网络面板验证分包与缓存命中效果；在 SSR 环境下检查依赖外部化行为。