资源内联阈值配置

小体积资源可内联为 base64，减少 HTTP 请求数量。

默认阈值

默认 4KB（4096 字节），小于此值的资源自动内联：

// 导入小图片
import icon from './icon.png'  // < 4KB

// 返回 base64 字符串
console.log(icon)  // "data:image/png;base64,..."

配置阈值

export default defineConfig({
  build: {
    assetsInlineLimit: 8192  // 8KB
  }
})

禁用内联

export default defineConfig({
  build: {
    assetsInlineLimit: 0  // 所有资源都不内联
  }
})

注意：禁用内联会增加请求数量，适合需要单独缓存的场景。

强制控制内联

// 强制内联
import icon from './icon.png?inline'

// 强制返回 URL
import banner from './banner.png?url'

内联效果对比

内联优缺点

适用场景

• 小图标、小图片适合内联
• 大图片、视频不适合内联
• 需单独缓存的资源不内联

要点总结

• assetsInlineLimit 控制内联阈值
• 默认 4KB 以下内联
• ?inline 和 ?url 强制控制
• 小资源内联减少请求