Vite优化静态资源的核心是减小体积、提升缓存命中率、加快首屏加载，通过Rollup机制实现自动内联（≤4KB转base64）、哈希命名、JS/CSS手动分块、Gzip/Brotli压缩及图片字体轻量化处理。
在 Vite 中优化静态资源的压缩与分块，核心是围绕 减小体积、提升缓存命中率、加快首屏加载 三件事展开。它不是靠堆插件，而是通过 Rollup 底层机制 + 精准配置协同完成。
静态资源自动内联与哈希命名
Vite 默认对小于 4 KB 的资源（如小图标、SVG、字体子集）自动转为 base64 内联进 JS/CSS，减少 HTTP 请求。大于该阈值的资源则生成带内容哈希的文件名（如 logo.a1b2c3d4.png），确保内容变更时 URL 改变，浏览器能精准更新缓存。
- 如需调整内联阈值，可在
vite.config.ts中设置：
build: { assetsInlineLimit: 8192 } // 单位字节，此处设为 8 KB
- 所有静态资源路径（
src/assets/下）引用时保持相对路径即可，Vite 会自动处理输出路径和哈希。
JS/CSS 分块策略：按依赖层级拆分
默认打包会把所有代码塞进一个大文件，导致用户每次更新都得重新下载全部 JS。合理分块能让稳定依赖（如 Vue、Pinia、Element Plus）长期缓存，只更新业务代码。
立即学习“Java免费学习笔记（深入）”；
- 用
build.rollupOptions.output.manualChunks按模块来源或功能分组：
manualChunks: {
vue: ['vue', 'vue-router', 'pinia'],
ui: ['element-plus', '@element-plus/icons-vue'],
utils: ['lodash-es', 'dayjs']
}
- 也可用函数方式精细化控制，比如将每个
node_modules一级包单独成 chunk：
manualChunks(id) {
if (id.includes('node_modules')) {
return id.toString().split('node_modules/')[1].split('/')[0];
}
}
启用 Gzip/Brotli 压缩
传输前压缩能显著降低网络载荷。Vite 本身不内置压缩，需借助插件实现。
- 安装并配置
vite-plugin-compression（支持 gzip）：
import compression from 'vite-plugin-compression'
plugins: [compression({ algorithm: 'gzip', threshold: 5120 })]
- 更进一步可加
vite-plugin-compression2同时生成 .gz 和 .br（Brotli），由服务器根据 Accept-Encoding 自动选择最优格式。
图片与字体资源的轻量化处理
图片常占页面体积大头。Vite 不默认压缩图片，需插件介入。
- 使用
vite-plugin-imagemin在构建时压缩 PNG/JPG/SVG/GIF：
import imagemin from 'vite-plugin-imagemin'
plugins: [
imagemin({
gifsicle: { quality: 75 },
mozjpeg: { quality: 80 },
pngquant: { quality: [0.7, 0.9] }
})
]
- 字体建议只引入实际用到的字重与字符集（如用
@font-face+unicode-range分割），避免整包加载。
