6. Статические ресурсы

Vite предоставляет мощную систему обработки статических ресурсов с поддержкой специальных URL-суффиксов, которые меняют способ импорта файла.

Обычный импорт ресурсов

// Импорт изображений
import logo from './logo.png'
// → logo = '/assets/logo-abc123.png' (хэшированный URL)

// В JSX:
<img src={logo} alt="Logo" />

// Импорт favicon
import icon from './icon.ico'

Суффиксы URL

Vite поддерживает специальные суффиксы, меняющие тип импорта:

?url — Явный URL

import logoUrl from './logo.png?url'
// → logoUrl = '/assets/logo-abc123.png'
// То же, что и обычный импорт для большинства файлов
// Но явно указывает намерение получить URL

// Полезно для SVG и текстовых файлов
import iconUrl from './icon.svg?url'

?raw — Содержимое файла как строка

import shaderCode from './shader.glsl?raw'
// → shaderCode = 'void main() { ... }' (содержимое файла)

import svgContent from './icon.svg?raw'
// → '<svg xmlns="...">...</svg>'

// Полезно для:
// - GLSL шейдеры
// - SVG для прямой вставки
// - Текстовые шаблоны

?worker — Web Worker

// Простой Worker
import MyWorker from './heavy-task.worker.ts?worker'
const worker = new MyWorker()
worker.postMessage({ data: [...] })

// Inline Worker (встроен в бандл, не создаёт отдельный файл)
import InlineWorker from './worker.ts?worker&inline'

// SharedWorker
import SharedWorker from './shared.worker.ts?sharedworker'

?init — WebAssembly

import init from './math.wasm?init'

async function run() {
  const instance = await init()
  console.log(instance.exports.add(2, 3)) // 5
}

Директория public/

Файлы в public/ копируются в корень dist/ без обработки:

public/
├── robots.txt          → /robots.txt
├── favicon.ico         → /favicon.ico
└── og-image.png        → /og-image.png

# Доступны по абсолютному пути:
<img src="/og-image.png" />
// НЕ импортируй файлы из public/ через import!
// Они не хэшируются и не оптимизируются

Inline ресурсы (base64)

vite.config.ts

build: {
  assetsInlineLimit: 4096, // 4KB — файлы меньше этого размера
  // встраиваются как base64 data URL
}

// Маленькие PNG/SVG автоматически конвертируются в:
// data:image/png;base64,iVBORw0KGgo...

TypeScript типы для ресурсов

// src/vite-env.d.ts (автоматически создаётся Vite)
/// <reference types="vite/client" />

// Содержит типы для:
declare module '*.svg' {
  const src: string
  export default src
}
declare module '*.png' { const src: string; export default src }
declare module '*.jpg' { const src: string; export default src }
declare module '*.svg?raw' { const content: string; export default content }
declare module '*.glsl?raw' { const content: string; export default content }

SVG как React компонент

# Установи плагин
npm i -D vite-plugin-svgr

vite.config.ts

import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [svgr()],
})

// Usage
import { ReactComponent as Logo } from './logo.svg'
// или с новым синтаксисом:
import Logo from './logo.svg?react'

// В JSX:
<Logo width={32} height={32} fill="#646cff" />

Ниже — интерактивный демонстратор всех вариантов импорта: выбирай суффикс и смотри результат: