vite通过“按需内联+哈希分发+环境适配”高效处理静态资源：默认小于4kb资源转base64内联，大于阈值则生成哈希独立文件；阈值可配置assetsinlinelimit；支持webp/avif现代格式；需配合nginx精准缓存策略及环境化cdn路径。
Vite 对静态资源的处理天然高效，关键在于理解它“按需内联 + 哈希分发 + 环境适配”的机制，并在配置中合理干预。不需要写一堆 loader，重点是控制体积阈值、启用现代格式、配合服务端缓存策略。
控制小资源内联与大资源分离
Vite 默认将小于 4KB 的图片、字体等资源转为 Base64 内联进 JS/CSS，减少请求数；大于该阈值则生成带哈希的独立文件，便于长期缓存。这个阈值可通过 assetsInlineLimit 调整：
- 设为
0：全部资源都输出为独立文件（适合 CDN 分发或需单独监控的场景） - 设为
8192（8KB）：对稍大的图标或 SVG 更友好，避免 CSS 膨胀 - 设为
false：完全禁用内联（不推荐，会增加请求数）
在 vite.config.ts 中配置：
build: {
assetsInlineLimit: 4096
}
})
启用 WebP/AVIF 等现代图像格式
Vite 6+ 原生支持 WebP 和 AVIF 引用。你只需把图片放在 src/ 下，用标准 import 或 CSS url() 引入，构建时会自动识别并生成对应格式（需安装对应插件如 vite-plugin-imagemin）。
- 插件压缩后，可同时输出
.webp和原格式，再用<picture></picture>标签优雅降级 - 注意：SVG 和字体通常不建议转 WebP，保持原格式更稳妥
- 开发时仍可用 PNG/JPG 预览，构建阶段才转换，不影响日常协作
配合 Nginx 实现精准缓存策略
Vite 构建产物自带哈希文件名（如 index.a1b2c3.js），但 HTML 不带哈希，必须由服务端特殊处理：
-
index.html必须禁用缓存：expires -1; add_header cache-control "no-cache" - JS/CSS/图片等带哈希的资源，可设为一年缓存：
expires 1y; add_header cache-control "public, immutable" - 使用
try_files $uri $uri/ /index.html解决 SPA 刷新 404 问题
这部分不在 Vite 配置里写，而是部署时 Nginx 的必备项，否则再好的构建也白搭。
按环境区分资源前缀与 CDN 路径
静态资源路径（比如 base 或 build.assetsDir）经常因环境而异：本地开发走相对路径，测试环境走内网 CDN，生产走外网 CDN。硬编码会出错，应结合 loadEnv 动态注入：
- 在
.env.production中写VITE_ASSETS_BASE=https://cdn.example.com/static/ - 配置中读取：
base: process.env.VITE_ASSETS_BASE || './' - 这样同一套代码，不同环境打包后资源自动指向对应域名，无需改构建脚本
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
