Vite 默认按4KB阈值内联小资源，生产构建时≤4KB转base64，>4KB输出独立哈希文件；可通过build.assetsInlineLimit调整阈值，支持?url、?raw等后缀显式控制加载策略。
在 Vite 中，静态资源（如图片、字体、SVG）的处理默认智能且高效，但关键在于理解它“怎么分”和“怎么控”——尤其是内联阈值这个核心开关。它不只影响打包体积，更直接关系到首屏加载请求数和渲染速度。
图片与字体的默认处理逻辑
Vite 对常见静态资源类型（.png、.jpg、.webp、.woff2、.svg（作为图像）等）开箱即用：
- 开发时：所有资源返回浏览器可直接访问的绝对路径（如
/logo.png），不走构建流程，assetsInlineLimit 配置完全无效 - 生产构建时：按文件体积自动决策
- ≤ 默认 4096 字节（4KB）→ 转为 base64 data URL，内联进 JS/CSS/HTML
- > 4KB → 单独输出到
dist/assets/，文件名带内容哈希（如icon.a1b2c3.svg）
- 字体（如
.woff2）同样适用该规则；SVG 若需作为 React/Vue 组件使用，须额外配置插件（如@svgr/plugin-vue），否则仍按普通资源返回 URL
调整内联阈值：build.assetsInlineLimit
这是控制“小资源是否内联”的唯一配置项，单位是字节，仅作用于生产构建：
- 设为
0：完全禁用内联，所有资源都输出为独立文件 - 设为
8192（8KB）：≤8KB 的图片/字体都会内联，适合图标多、单图小、HTTP/2 环境下想减少请求数的项目 - 设为
1024（1KB）：更激进地只内联极小资源（如 1×1 像素占位图），避免 base64 膨胀 JS 体积
配置示例（vite.config.ts）：
立即学习“Java免费学习笔记（深入）”；
export default defineConfig({<br> build: {<br> assetsInlineLimit: 8 * 1024 // 8KB<br> }<br>})绕过默认规则的显式导入方式
当默认行为不符合需求时，可用后缀强制指定加载策略：
-
import imgUrl from './logo.png?url'→ 强制返回 URL（跳过内联判断，始终输出独立文件） -
import rawSvg from './icon.svg?raw'→ 以字符串形式读取 SVG 源码，便于动态注入或 DOM 操作 -
import workletUrl from './border.js?worker'→ 将脚本作为 Web Worker 加载（适用于图像处理等耗时任务）
注意：public/ 目录下的资源（如 public/favicon.ico）不参与构建，始终通过绝对路径 /favicon.ico 访问，也**不受 assetsInlineLimit 影响**。
工程化建议：平衡请求与体积
内联不是越多越好，需结合实际场景权衡：
- ✅ 推荐内联：头像小图（<2KB）、状态图标（SVG sprite 单个 icon）、字体文件中极小的
.woff2子集 - ❌ 避免内联：大于 10KB 的 banner 图、未压缩的 PNG、整套图标字体文件（易导致 JS 包暴涨）
- ? 验证效果：构建后检查
dist/目录，看目标资源是否出现在assets/下；也可用rollup-plugin-visualizer查看 base64 字符串在 JS chunk 中的占比
不复杂但容易忽略。
