Vue/Vite构建时为何部分图片未合并进包内？

现象说明 #

我的应用包含十几张图片，构建后一部分被嵌入到/assets/index-?????.js文件中（符合预期），另一部分则单独输出到/assets目录（文件名已混淆）。构建输出如下：

vite v4.1.4 building for production...
✓ 436 modules transformed.
dist/index.html                      0.43 kB
dist/assets/notrack-6b2c347b.jpg     4.42 kB
dist/assets/topright-3d03ad17.png    4.72 kB
dist/assets/holder-f1d73545.jpg      8.21 kB
dist/assets/noentry-492af733.jpg     9.71 kB
dist/assets/index-8c326570.css     401.51 kB │ gzip:  50.54 kB
dist/assets/index-da5aa7cc.js      377.53 kB │ gzip: 129.16 kB

这些单独打包的图片和嵌入JS的10张图片，在定义和使用方式上完全一致：

• 定义方式试过两种，结果相同：
  方式1：

  const botright =  new URL('./assets/images/botright.png', import.meta.url).href
  

  方式2：

  import botright from './assets/images/botright.png'
  

• 使用方式统一为：

  <v-img class="cannotDrag"
    @dragstart="drag($event)"
    :src = cell.content
  > 
  </v-img>
  

已排除顺序、格式差异（曾统一改为.png，结果类似）等因素，应用运行正常，但想知道为何图片处理方式不同。

核心原因：Vite的资源内联阈值规则 #

Vite默认会对小于4KB的静态资源（包括图片）进行Base64编码，直接嵌入到JS/CSS文件中；而超过这个大小阈值的资源，会被单独打包为独立文件输出到assets目录。

从你提供的构建输出能看到，那4张单独打包的图片大小都超过了4KB（最小的4.42KB），而嵌入JS的10张图片应该均小于4KB，这就是两者处理方式不同的根本原因。

如何修改这个阈值 #

如果需要调整内联的大小限制，可以在vite.config.js中配置assetsInlineLimit参数：

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    assetsInlineLimit: 8192 // 改为8KB，单位是字节
  }
})

内容的提问来源于stack exchange，提问作者quilkin