Vite生产构建需手动配置Rollup优化：规范输出目录与文件名、合理代码分割、启用体积分析与Tree-shaking、增强压缩与资源处理。
Vite 生产构建默认用 Rollup，但很多优化需要你主动配置在 vite.config.js 的 build.rollupOptions 里。不改的话，打包产物容易体积大、结构乱、缓存差、调试难。
精准控制输出目录与文件名
默认所有资源（js/css/img）都堆在 dist/ 根目录下，不利于部署和缓存管理。通过 output 配置可分类归置：
-
指定输出根目录：必须设
dir，尤其多入口或有 asset 时 -
区分文件类型命名规则：
-
entryFileNames: 'js/[name]-[hash].js'→ 入口脚本进js/ -
chunkFileNames: 'js/chunk-[hash].js'→ 动态导入或公共 chunk -
assetFileNames: '[ext]/[name]-[hash][extname]'→ css 进css/，img 进img/，font 进fonts/
-
合理代码分割，提升缓存命中率
把稳定不变的依赖单独打包，浏览器可长期缓存，更新业务代码时不影响它们。
-
按包名自动分组：用
manualChunks函数识别node_modules中的库名，比如vue、lodash-es各自成块 -
按功能手动分组（推荐中大型项目）：
framework: ['vue', 'vue-router', 'pinia']ui: ['element-plus', '@icon-park/vue']utils: ['lodash-es', 'date-fns']
- 避免过度拆分：单个 chunk 小于 5KB 时，合并更划算（HTTP/2 下优势减弱，但减少请求数仍有意义）
启用深度体积分析与 Tree-shaking
光靠默认 Tree-shaking 不够，得配合工具定位问题、验证效果。
立即学习“Java免费学习笔记（深入）”；
-
装
rollup-plugin-visualizer：打包后生成交互式stats.html，一眼看出谁占体积最大 -
确认
package.json中"sideEffects": false（或精确列出 CSS/字体等副作用文件），否则 Rollup 可能不敢删“看似没用”的代码 -
UI 库务必按需导入：如 Element Plus 配合
unplugin-vue-components，只打包实际用到的组件和样式
压缩与资源处理增强
Vite 默认用 esbuild 压缩 JS，但可进一步收紧：
-
build.minify = 'esbuild'（保持默认即可，速度快） - 加
esbuild: { dropConsole: true, dropDebugger: true }清理调试残留 - CSS 压缩由
lightningcss或内置插件处理，无需额外配 - 图片用
vite-plugin-imagemin压缩，支持 WebP 转换和尺寸裁剪
