Что такое Vite? Простое руководство для создателей приложений

Vite (произносится «вит», по-французски «быстро») — это инструмент сборки для сайтов и веб-приложений. Пока вы работаете, он запускает сервер разработки, который показывает изменения в браузере почти мгновенно. Когда вы готовы к запуску, он упаковывает код в небольшие оптимизированные файлы, которые может отдать любой веб-хостинг. Он бесплатный, с открытым исходным кодом и стоит за многими проектами на React, Vue и Svelte по умолчанию.

Почему Vite важен при создании приложений с ИИ

Возможно, вы никогда не будете набирать команды Vite вручную, но если ваше приложение создано с помощью ИИ-конструктора, скорее всего, его запускает именно Vite. Mythex начинает новые проекты на стеке Vite + React + TypeScript + Tailwind, если вы не попросили иначе (как выбирается стек).

Понимание того, что делает Vite, помогает:

• Понимать предпросмотр. Живой предпросмотр, который обновляется, пока ИИ правит файлы, обычно работает на сервере разработки Vite.
• Понимать публикацию. Приложение на Vite превращается в папку статических файлов — HTML, JavaScript, CSS и изображения, — которую дёшево и просто разместить.
• Читать сообщения об ошибках. Когда предпросмотр показывает красное окно ошибки или пустую страницу, часто это Vite сообщает, что какой-то файл не скомпилировался.
• Знать его ограничения. Vite собирает фронтенд. Если приложению нужен бэкенд — база данных, секретные API-ключи, платежи, — он работает где-то в другом месте. См. фронтенд и бэкенд.

Бытовая аналогия

Представьте кухню ресторана.

• Во время подготовки (разработка) повар пробует и корректирует каждое блюдо по ходу дела. Поменяли приправу — через секунду пробуют снова. Это сервер разработки Vite: вы меняете файл, страница обновляется сразу, часто не теряя то, что вы уже ввели в форму.
• Для кейтеринга (продакшен) всё готовится, порционируется, упаковывается и маркируется, чтобы легко перевозиться и подаваться где угодно. Это и есть vite build: ваш код собирается в пакет, сжимается и получает уникальные имена файлов, готовые к любому хостингу.

Рецепты те же, а обращение с ними разное — и Vite умеет и то и другое.

Что на самом деле делает Vite

Современное веб-приложение состоит из множества файлов: компонентов, стилей, изображений и сторонних библиотек. Браузеры не могут использовать всё это в исходном виде. TypeScript нужно превратить в JavaScript, JSX React — преобразовать, а классы Tailwind — превратить в CSS.

Vite делает это в двух режимах:

Старые инструменты собирали всё приложение целиком, прежде чем что-то показать, поэтому запуск и обновление большого проекта могли занимать много времени. Трюк Vite в том, что во время разработки он этого не делает и позволяет браузеру загружать файлы по мере необходимости. Для продакшена он всё же выполняет сборку пакета — начиная с Vite 8 с помощью сборщика Rolldown — потому что множество мелких файлов медленнее для посетителей, чем несколько оптимизированных.

Пример: что находится внутри проекта Vite

Вот примерно так выглядит небольшое приложение на Vite + React:

my-app/
  index.html          ← единственная HTML-страница, с которой стартует приложение
  package.json        ← список библиотек и скриптов (dev, build)
  vite.config.ts      ← настройки Vite и плагины
  src/
    main.tsx          ← запускает React и монтирует его в index.html
    App.tsx           ← компонент верхнего уровня вашего приложения
    index.css         ← стили, например @import "tailwindcss";
  public/             ← файлы, которые копируются как есть (favicon, robots.txt)

И скрипты в package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Теперь проследим за одним изменением:

1. Вы просите ИИ: «сделай заголовок синим».
2. Он правит класс в App.tsx.
3. Vite замечает, что файл изменился, преобразует только его и отправляет обновление в браузер.
4. Заголовок становится синим в предпросмотре, обычно меньше чем за секунду.

Когда вы публикуете проект, vite build создаёт что-то вроде dist/index.html и dist/assets/index-a1b2c3.js. Случайно выглядящая часть имени файла меняется всякий раз, когда меняется содержимое, поэтому браузеры и CDN могут долго кешировать файлы, не отдавая устаревший код.

Переменные окружения в Vite

Vite открывает браузерному коду только переменные, имена которых начинаются с VITE_, например VITE_PUBLIC_MAP_ID. Это мера безопасности: всё, что есть в браузерном коде, видно посетителям, поэтому секретные ключи никогда не должны иметь этот префикс и должны оставаться на бэкенде. См. переменные окружения и секреты.

Основные термины

Частые заблуждения

• «Vite — это фреймворк». Это инструмент сборки. Фреймворк — React, Vue или Svelte; Vite его запускает и упаковывает.
• «Приложение на Vite включает бэкенд». Стандартное приложение на Vite — только фронтенд. Базы данных, входы и секретные ключи требуют сервера или API рядом.
• «Сервер разработки можно выставлять в интернет». Он не предназначен для реального трафика. Всегда публикуйте результат продакшен-сборки.
• «Всё в .env — секрет». В приложении на Vite переменные VITE_ встраиваются в файлы, которые скачивает каждый посетитель.
• «Ошибка 404 при обновлении страницы значит, что приложение сломано». В одностраничном приложении хостинг должен отправлять все маршруты на index.html. Это настройка хостинга — см. как исправить ошибки 404 после публикации.

Что просить у ИИ-конструктора

• «Это приложение только на Vite (фронтенд) или с бэкендом тоже? Где работает каждая часть?»
• «Запусти продакшен-сборку и исправь все ошибки и предупреждения до публикации».
• «Проверь, что секретные ключи не лежат в переменных VITE_ и нигде во фронтенд-коде».
• «Предпросмотр показывает пустую страницу — проверь консоль Vite и браузера и исправь причину». См. как исправить пустую белую страницу.
• «После публикации убедись, что обновление страницы работает для любого адреса, а не только для главной».

Vite в Mythex

Каждый новый проект Mythex начинается на Vite, если вы не попросили Next.js, статический HTML или другой бэкенд. Живой предпросмотр в вашей приватной песочнице обновляется по мере того, как агент правит файлы, а публикация собирает приложение и разворачивает его — настраивать хостинг самому не нужно. Если позже понадобятся API или база данных, попросите в чате, и Mythex добавит бэкенд-сервис рядом с фронтендом на Vite (приложения из нескольких сервисов).

Вопросы