vite生产环境静态资源优化核心是合理配置构建、体积压缩、缓存控制与安全加固：启用manualchunks分包、terser压缩混淆、关闭sourcemap、设置hash文件名、配置base路径及cdn适配，确保产物高效加载与长期缓存。
用 Vite 构建高质量的生产环境静态资源，核心在于合理配置构建行为、优化产物体积、确保资源可缓存且稳定可部署。默认构建已很优秀，但真正“出色”的产物需要针对性调整。
启用正确的构建模式与基础配置
Vite 默认 vite build 即为生产模式，但需确认关键行为：
-
关闭开发专用功能：确保
define中无__DEV__或调试逻辑；build.sourcemap建议设为false（或'hidden'）以避免源码泄露 -
指定明确的输出目录：通过
build.outDir（如'dist'）统一管理产物，便于 CI/CD 集成 -
保持公共资源路径正确：若部署在子路径（如
/app/），设置base: '/app/'，否则fetch、图片引用等会 404
精细控制代码分割与资源加载
默认的自动代码分割已足够好，但可进一步提升加载性能和缓存效率：
-
提取 vendor 和运行时：在
build.rollupOptions.output.manualChunks中分离三方库（如node_modules）和框架运行时，避免业务变更导致所有 JS 缓存失效 -
为 CSS 启用独立文件：Vite 默认将 CSS 内联进 JS，可通过
build.rollupOptions.plugins加入rollup-plugin-css-only或升级到 Vite 5+ 后使用build.cssCodeSplit: true（默认开启）生成独立.css文件 -
按需加载 + 预加载提示：对路由级异步组件（
defineAsyncComponent或import()）配合/* @vite-preload */注释，让 Vite 自动注入<link rel="preload">
压缩、混淆与完整性保障
Vite 底层使用 esbuild（JS/TS）和 PostCSS（CSS），压缩能力强大，但需主动启用并验证：
-
启用 terser（更细粒度压缩）：若需保留 license 注释或定制压缩等级，安装
terser并配置build.minify: 'terser'，再通过build.terserOptions调整 -
移除 console 和 debugger：在
terserOptions.compress中设drop_console: true、drop_debugger: true -
生成子资源完整性（SRI）：设置
build.ssr: false（客户端构建）后，启用build.manifest: true可生成manifest.json；搭配插件如vite-plugin-sri可自动注入integrity属性，增强 CDN 安全性
适配部署与缓存策略
静态产物最终要上线，需让浏览器和服务端协同实现高效缓存：
-
启用文件名哈希：Vite 默认开启
build.rollupOptions.output.entryFileNames和chunkFileNames的[hash]占位符，确保内容变化时 URL 变更，支持长期强缓存（Cache-Control: max-age=31536000） -
生成 HTML 时注入版本信息：利用
transformIndexHtml钩子，在index.html中插入构建时间、Git commit 等元数据，方便运维追踪 -
适配不同托管平台：Netlify / Vercel 无需额外配置；若部署到 Nginx，确保配置了
try_files $uri $uri/ /index.html;支持前端路由 fallback
不复杂但容易忽略 —— 出色的静态产物不是堆砌插件，而是理解每个配置项如何影响加载、缓存、安全与可维护性，并根据实际部署链路做取舍。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
