vite静态资源打包压缩需分层处理：小资源（

在 Vite 中实现高效的静态资源打包压缩，关键不是“堆插件”，而是分层处理：小资源内联减少请求、大资源分类存放、传输时再压缩。下面几项配置组合起来，效果明显且稳定。

小资源自动内联（避免 HTTP 请求）

Vite 默认对 小于 4KB 的图片、字体、SVG 等静态资源，会转为 base64 字符串直接嵌入代码中。这省去了额外请求，适合图标、小 logo 等。

• 默认阈值是 4096 字节（4KB），可按项目需要调高，比如设为 8KB：

build: { assetsInlineLimit: 8 * 1024 }

• 设为 0 表示全部内联（不推荐，大图会导致 JS 体积暴增）；
• 若启用库模式（build.lib），该配置会被忽略，所有资源都会内联。

大资源分类输出（提升可读性与缓存效率）

默认打包后所有资源都丢进 assets/ 目录，杂乱且不利于 CDN 缓存策略。通过 Rollup 的 assetFileNames 可按类型分离：

• CSS 放 static/css/，JS 放 static/js/，图片放 static/img/，字体放 static/font/；
• 同时用 chunkFileNames 和 entryFileNames 统一 JS 命名规则，带 hash 防缓存失效。

rollupOptions: { output: { assetFileNames: 'static/[ext]/[name]-[hash].[ext]', chunkFileNames: 'static/js/[name]-[hash].js', entryFileNames: 'static/js/[name]-[hash].js' } }

Gzip/Brotli 传输压缩（减小网络体积）

前端打包后文件体积仍大？光靠 JS/CSS 压缩不够。真正见效的是让浏览器加载更小的传输体——用 vite-plugin-compression 自动生成 .gz 或 .br 文件：

Vite

为开发、生产构建和库打包配置并优化 Vite。

下载

• 安装：npm install vite-plugin-compression -D；
• 插件配置建议开启 brotli（比 gzip 压缩率高 10–20%），并保留原始文件（deleteOriginFile: false）；
• 设置 threshold: 5120（5KB），避免压缩过小文件得不偿失。

plugins: [viteCompression({ algorithm: 'brotli', ext: '.br', threshold: 5120 })]

⚠️ 注意：生成的 .br/.gz 文件需配合 Nginx/Apache 开启对应模块，并配置 Accept-Encoding 处理逻辑，否则无效。

超大资源主动拆包（防单文件臃肿）

当某个 chunk 超过 1MB（Vite 默认警告阈值 500KB），说明它可能混入了大量第三方依赖。手动拆分能显著降低首屏 JS 加载压力：

• 把 Vue 生态（vue、vue-router、pinia）、工具库（lodash-es）、UI 库（element-plus）各自打成独立 chunk；
• 利用 manualChunks 按 node_modules 路径一级目录识别，简单可靠。

manualChunks(id) { if (id.includes('node_modules')) { return id.split('node_modules/')[1].split('/')[0]; } }

这样打包后，vue.js、lodash-es.js、element-plus.js 就会单独存在，利于长期缓存和并行加载。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南