Vite 5 + React 18 生产环境构建优化指南

概览Vite 5 在开发体验与构建性能上均表现出色，结合 React 18 可实现高效的生产发布。本文聚焦可验证的配置与度量方法。关键配置示例// vite.config.ts import { defineConfig } from "vite" import react from "@vitejs/plugin-react" export default defineConfig({ plugins: [react()], build: { target: "es2019", sourcemap: true, cssCodeSplit: true, rollupOptions: { output: { manualChunks: { react: ["react", "react-dom"], }, }, }, }, optimizeDeps: { include: ["react", "react-dom"], }, }) 优化清单使用 `manualChunks` 做稳定分包，提升缓存命中通过 `dynamic import()` 为路由与大型组件做按需加载保持 `NODE_ENV=production`，避免开发标记污染开启 `sourcemap` 便于错误追踪，发布时视需求关闭性能度量引入 `@vitejs/plugin-legacy` 验证旧浏览器覆盖面构建后使用 Bundle 分析工具（如 `rollup-plugin-visualizer`）校验体积与重复依赖常见问题第三方库未标注 `module` 导致 Tree-Shaking 受限私有包与 Monorepo 需锁定依赖入口，避免重复打包结论通过稳定的分包策略与按需加载，可显著降低首屏体积并提高缓存效率。本文提供的配置与度量方法已在生产验证，适合作为统一模板。