vite生产构建流水线需围绕vite.config.js编写可维护逻辑：环境解耦、体积精简、部署可靠、构建提速。通过mode判断、.env抽离敏感配置、manualchunks分包、禁用sourcemap、哈希资源名、base路径适配、emptyoutdir清理及optimizedeps优化预构建实现全流程管控。
用 JavaScript 配置 Vite 的生产构建流水线，核心是围绕 vite.config.js 编写可维护、可复用、面向交付的构建逻辑。它不是堆砌参数，而是按目标组织配置：压缩更小、加载更快、部署更稳、调试更准。
明确构建目标与环境分离
生产构建必须和开发环境解耦。Vite 默认通过 mode 区分环境，推荐在 vite.config.js 中导出函数，动态返回配置：
- 用
process.env.NODE_ENV或command === 'build'判断当前是否为构建阶段 - 把敏感配置（如 CDN 域名、Sentry DSN）抽到
.env.production，通过import.meta.env访问 - 避免在 config 文件里硬编码路径或 URL，改用变量 + 注释说明用途，例如：
base: import.meta.env.VITE_PUBLIC_PATH || '/'
精简产物体积与提升加载性能
构建输出大小直接影响首屏时间。Vite 默认已做基础优化，但关键点需手动加固：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
-
启用 Rollup 级代码分割：在
build.rollupOptions.output中配置manualChunks，把vue、lodash-es等稳定依赖单独打包 -
压缩图片与字体：引入
vite-plugin-imagemin，支持 WebP 转换、SVG 压缩、字体子集提取（尤其对中文项目有效） -
禁用 source map（上线前）：设
build.sourcemap = false；若需错误监控，可用'hidden'模式，生成但不注入 HTML -
清理未使用 CSS：配合
unplugin-vue-components和unplugin-auto-import，再启用build.cssCodeSplit = true，让 CSS 也按路由拆分
保障部署可靠性与版本控制
构建产物要能稳定上线，不能因缓存或路径错乱导致白屏：
-
设置唯一资源哈希：用
build.rollupOptions.output.entryFileNames和assetFileNames加入[hash]，例如'assets/[name]-[hash:8].js' -
指定静态资源基础路径：
base必须匹配实际部署位置，子目录部署填/my-app/，CDN 填完整 URL 如https://cdn.example.com/my-app/ -
强制清空旧 dist：设
build.emptyOutDir = true，避免残留文件引发版本混乱 -
校验构建完整性：构建后可加脚本检查
dist/index.html是否包含预期 script 标签，或用vite-plugin-checker在构建时拦截 TypeScript 错误
提速构建过程本身
CI/CD 流水线中，构建耗时影响发布节奏。Vite 的预构建机制可针对性优化：
-
跳过大型依赖预构建：若项目用了
echarts或pdfjs-dist，它们体积大且 esbuild 处理慢，可加进optimizeDeps.exclude -
锁定预构建缓存：设
optimizeDeps.cacheDir到 CI 工作区固定路径，并在 pipeline 中缓存该目录，避免每次重跑 -
并行压缩：用
esbuild替代 terser 做 JS 压缩（Vite 5+ 默认已启用），无需额外插件 -
关闭非必要插件：开发专用插件（如
vite-plugin-mock、@vitejs/plugin-vue-jsx）只在command === 'serve'时加载
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
