vite首屏优化核心是减体积、控顺序、预复用：通过manualchunks精细分包、tree-shaking+轻量替代（如lodash-es/dayjs）、brotli压缩、modulepreload预加载实现。
Vite 实现首屏加载性能优化，核心是“减少关键资源体积 + 控制加载顺序 + 提前准备可复用模块”。它不靠全量打包，而是利用原生 ESM 和精细分包策略，在构建阶段就为浏览器铺好最快路径。
精分代码块：把稳定依赖单独抽成 vendor chunk
默认情况下，Vite 会把所有 node_modules 依赖打到一个或少数几个大文件里，业务一改，整个 vendor 哈希全变，浏览器缓存失效。你需要主动干预：
- 在 vite.config.js 的
build.rollupOptions.output.manualChunks中按模块类型归类，比如：
包含vue、vue-router、pinia的归为vue-core；lodash-es单独成lodash；echarts或ant-design-vue等 UI/图表库归为ui或charts - 避免按包名自动切分（如
id.split('node_modules/')[1].split('/')[0]），容易把小工具包也拆成几十个 2KB 文件，反而增加请求数 - 配合
experimentalMinChunkSize: 4096，防止过细拆分，兼顾体积与请求数平衡
砍掉冗余体积：Tree-shaking + 更轻的替代方案
体积大不是因为用了多，而是没筛干净。重点盯住三类“高体积低使用率”依赖：
-
lodash → 换成
lodash-es，支持静态分析，未引用方法不会打进包；不用lodash全量引入 -
moment.js → 替换为
dayjs或date-fns，体积降低 90%，且天然支持按需导入 -
图片/字体/图标 → 小图标转 base64 内联（通过
assetsInlineLimit设置阈值）；大图加loading="lazy"，首屏外延后加载
压缩传输 + 启用现代编码
体积减下来之后，还要让传输更快：
- 开启
gzip或更优的brotli压缩：用vite-plugin-compression插件，设threshold: 10240（10KB 以上才压），避免小文件压缩得不偿失 - 确保服务器支持并返回
Content-Encoding: br或gzip，否则插件生成的 .br/.gz 文件不会被浏览器使用 - 关闭
cssCodeSplit: false可合并 CSS，但要权衡——若 CSS 已按路由拆分，保留true更利于按需加载
预加载关键资源：让浏览器提前拿
首屏渲染最耗时的常是“等 JS 执行完才开始解析 HTML”，可通过资源提示（resource hints）抢跑：
- 在
index.html的中手动加：<link rel="modulepreload" href="/assets/js/index-xxx.js"> - 或用插件
vite-plugin-preload自动注入首屏必需 chunk 的 preload 标签 - 对字体、核心 API 数据（如用户信息）也可用
<link rel="preload">提前拉取，但注意别滥用，抢占带宽反而拖慢主资源
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
