优化Vite生产打包需分三步：精准分包（路由懒加载+manualChunks）、深度压缩（Terser/CSS/图片）、剔除冗余（可视化分析+Tree Shaking+按需引入），并优化加载策略（禁sourceMap、contenthash、preconnect/preload）。
优化 Vite 生产环境打包输出，核心目标是让产物体积更小、加载更快、构建更稳。Vite 默认已做基础压缩和分包，但中大型项目必须主动配置才能释放真正性能。
精准控制代码分割与分包
避免所有依赖挤进一个 vendor.js，也别让业务逻辑全塞进 index.js：
- 按路由懒加载：用
import()动态导入页面组件，Vite 自动拆出独立 chunk - 手动定义分包规则：在
build.rollupOptions.output.manualChunks中按用途归类，例如：vue: ['vue', 'vue-router', 'pinia']utils: ['lodash-es', 'date-fns']ui: ['element-plus', '@ant-design/icons-vue'] - 抽离高频工具模块：把
src/utils/request.ts、src/constants.ts单独打包，提升复用率和缓存命中率
深度压缩 JS/CSS 与静态资源
压缩不是只开个 minify: true 就完事，要分层处理：
- JS 层面：启用
terser替代默认的esbuild，可移除console、debugger，并保留keep_fnames防止压缩后调试困难 - CSS 层面：确保
build.cssCodeSplit为true，让 CSS 按 chunk 拆分；配合css.minify: 'lightningcss'（需安装对应插件）获得更好压缩比 - 图片资源：接入
vite-plugin-imagemin，对.png、.jpg、.gif在构建时自动压缩，支持 WebP 转换
剔除冗余代码与无效依赖
体积膨胀常源于“看不见”的死代码：
立即学习“Java免费学习笔记（深入）”；
- 启用可视化分析：加
rollup-plugin-visualizer插件，生成stats.html查看各模块体积占比，快速定位大依赖 - 确认
package.json中设了"sideEffects": false（或精确列出需保留的文件），保障 Tree Shaking 有效 - UI 库务必按需引入：用
unplugin-vue-components或unplugin-auto-import自动导入组件和 API，避免全量引用 - 检查
node_modules是否混入重复版本（如多个lodash），用npm ls lodash或yarn list lodash排查
优化构建产物结构与加载策略
让浏览器更高效地使用这些文件：
- 关闭 source map：设
build.sourcemap: false；若需调试，改用hidden模式，不上传到 CDN - 启用 contenthash：Vite 默认已用
[name]-[hash].js，确保内容不变则文件名不变，利于长期缓存 - 预连接关键域名：在
index.html中添加<link rel="preconnect" href="https://api.example.com">，减少 DNS 和 TLS 开销 - 关键资源预加载：首页用到的图表库、字体等，用
<link rel="preload">提前拉取
