## Сущность манифеста Vite и его роль в серверной интеграции
При сборке проекта Vite в production-режиме формируется набор статических ассетов с хешированными именами файлов. Эти имена генерируются для решения задачи кеширования: каждый изменённый файл получает новый хеш, что позволяет браузеру обновлять ресурсы только при реальных изменениях.
Ключевым артефактом сборки становится файл манифеста, обычно расположенный по пути `dist/manifest.json`. Он представляет собой JSON-структуру, которая связывает исходные модули приложения с итоговыми скомпилированными файлами.
Структура манифеста позволяет серверной части приложения точно определить, какие JS, CSS и дополнительные ресурсы необходимо подключить для конкретной точки входа.
---
## Структура manifest.json
Типичный `manifest.json` содержит объект, где ключами выступают исходные входные файлы, например `index.html` или `src/main.js`, а значениями — описание собранных ресурсов.
Пример упрощённой структуры:
```json
{
"src/main.js": {
"file": "assets/main.8f3a1c2d.js",
"css": ["assets/main.4c9d2f1e.css"],
"imports": ["_vendor.7a91c2.js"],
"isEntry": true
}
}
```
Основные поля:
* **file** — основной JS-бандл для точки входа
* **css** — связанные стили, выделенные в отдельные файлы
* **imports** — дополнительные чанки, которые нужно загрузить
* **isEntry** — признак входной точки приложения
* **assets** — дополнительные ресурсы (изображения, шрифты), если они связаны с модулем
---
## Зачем серверу нужен manifest
В отличие от dev-режима, где Vite сам управляет модулями через ESM и middleware, production-сборка полностью статична. Сервер больше не участвует в сборке, а лишь отдаёт готовые файлы.
Проблема заключается в том, что имена файлов динамические:
```
main.js → main.8f3a1c2d.js
```
Без манифеста сервер не может заранее знать итоговые пути к файлам. Поэтому manifest становится индексом соответствий между логическими точками входа и физическими ресурсами.
---
## Базовый сценарий использования на сервере
Серверная логика обычно выполняет три шага:
1. Загружает `manifest.json`
2. Находит нужную entry-point запись
3. Генерирует HTML с правильными ссылками на ассеты
### Пример на Node.js
```js
import fs from 'fs';
const manifest = JSON.parse(
fs.readFileSync('./dist/manifest.json', 'utf-8')
);
const entry = manifest['src/main.js'];
const scripts = `
`;
const styles = (entry.css || [])
.map((href) => `
`)
.join('\n');
const html = `
${styles}
${scripts}