Мелкие файлы в Vite

Мелкий файл ниже порога попадает в код как адрес data, а не отдельным файлом.

Каждый отдельный файл картинки - это лишний запрос браузера. Vite может встроить маленький ресурс прямо в JavaScript или CSS в виде длинного адреса data:. Порог задаёт поле build.assetsInlineLimit в байтах. Файл меньше порога не копируется в каталог ассетов.

Рядом с модулем лежит компактный svg:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 16">
  <text x="2" y="12" font-size="10">hello</text>
</svg>

Порог поставим 8192 - это больше размера такого svg, значит встроение сработает:

import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    assetsInlineLimit: 8192,
  },
})

Импорт картинки и текст hello на странице:

import markUrl from './mark.svg'

const img = document.createElement('img')
img.src = markUrl
document.body.append(img)
document.querySelector('#app').textContent = 'hello'

Выполним сборку:

npm run build

Откроем JavaScript-файл в dist/assets. Внутри будет строка, начинающаяся с data:image/svg+xml, а отдельного mark с расширением svg в каталоге ассетов не будет.

Создайте src/dot.svg с текстом hello, импортируйте его в src/main.js, поднимите порог встраивания до 4096, соберите проект и найдите data: в итоговом скрипте.

Поставьте порог встраивания в 0, пересоберите проект со словом ready на странице и проверьте, что svg снова лежит отдельным файлом в dist/assets.