Vite前端优化核心是构建快、体积小、加载准：依赖预构建提速、精准代码分割、terser压缩、图片压缩及preload/prefetch等运行时策略。
在 Vite 中优化前端项目打包性能与加载速度，核心是围绕「构建快、体积小、加载准」三个目标展开。Vite 本身已具备极快的冷启动和按需编译能力，但中大型项目仍需主动干预，才能释放全部潜力。
依赖预构建提速
Vite 启动时会自动对 node_modules 中的 CommonJS/UMD 包做预构建（转为 ESM 并缓存），但默认行为可能不够精准：
- 显式声明
include，把高频、解析耗时的包（如echarts、moment）纳入预构建范围，避免首次启动漏扫 - 用
exclude排除已原生支持 ESM 的包（如vue-demi、lodash-es），跳过冗余转换 - 开启
esbuildOptions.minify: true（仅限预构建阶段），压缩依赖代码，减少内存占用
精准代码分割与 chunk 控制
避免所有第三方依赖挤进一个 vendor.js，也别让业务代码全塞进 index.js：
- 路由级懒加载：用
import()动态导入页面组件，Vite 自动为其生成独立 chunk - 手动分包：在
rollupOptions.output.manualChunks中按路径规则拆分，例如将node_modules/axios和node_modules/dayjs分成两个 chunk - 常量/工具库抽离：把
src/constants.ts或src/utils/request.ts单独打包，提升复用率和缓存命中率
生产构建体积压缩
打包后体积直接影响首屏时间，关键动作要落在构建输出环节：
立即学习“Java免费学习笔记（深入）”；
- 启用
terserOptions清除console和debugger，减小 JS 大小 - 设置
chunkSizeWarningLimit（如1000KB），及时发现过大 chunk 并针对性优化 - 关闭 source map（
build.sourcemap: false）或仅保留hidden模式，避免上传体积膨胀 - 对图片等静态资源启用
vite-plugin-imagemin等插件，在构建时自动压缩
运行时加载策略增强
光靠打包还不够，得让浏览器更聪明地加载资源：
- 关键路由组件配合
<link rel="preload">提前拉取，比如首页用到的图表库可预加载 - 非关键资源（如弹窗、报表页）用
rel="prefetch"，利用空闲带宽静默下载 - 对跨域接口域名加
<link rel="preconnect">，减少 DNS 查询和 TCP 握手延迟 - 组件级懒加载：Vue 项目中使用
defineAsyncComponent加载大而低频的组件（如富文本编辑器）
