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

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 环境下检查依赖外部化行为。