Vite — 2learn

Что это такое

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

Почему это важно

Vite убирает ожидание после сохранения файла. Бандлеры перестраивают граф, прежде чем браузер что-то покажет, а на большом проекте это секунды простоя при каждом изменении. Раздача нативных модулей означает, что браузер запрашивает только тот файл, который изменился, поэтому обновление почти мгновенно независимо от размера проекта. Именно это свойство изменило выбор инструментов по умолчанию для новых проектов. Поэтому стоит понимать, откуда берётся скорость — и где она не работает, — а не считать инструмент волшебной коробкой.

Ключевые идеи

Разработка раздаёт модули; продакшен собирает бандл

Сервер разработки бандл не собирает. Однако вместо этого он переписывает голые спецификаторы импортов в настоящие пути и позволяет браузеру вытянуть граф, преобразуя файлы по мере запроса. Отсюда и быстрый холодный старт, и то, что первая загрузка страницы в режиме разработки может быть медленнее, чем в продакшене: браузер делает много запросов.

// vite.config.js — часто вот такой короткий
import { defineConfig } from "vite";

export default defineConfig({
  server: { port: 5173 },
  build: { sourcemap: true },
});

Зависимости предсобираются один раз

Сторонние пакеты преобразуются в ES-модули и кэшируются при первом использовании: многие из них опубликованы в формате модулей, который браузер не может потребить напрямую. Из-за этого шага правка зависимости просит перезапуска, и из-за него же сломанная предсборка проявляется как ошибка про зависимость, а не про ваш код.

Горячая замена модулей идёт по каждому модулю

Правка отправляется в затронутый модуль и его импортёров, а не перезагружает страницу. В несвязанных компонентах состояние сохраняется, и это важно, когда часть, над которой вы работаете, лежит в трёх кликах. HMR — удобство разработки без продакшен-аналога; код, который рассчитывает, что он будет работать, поведёт себя иначе в собранном результате.

Переменные окружения открываются по префиксу и не являются секретами

Клиентскому коду доступны только переменные с префиксом по соглашению инструмента, и всё открытое публично, потому что попадает в бандл. Конфигурация, которая должна оставаться секретной, живёт на сервере, а не в клиентской сборке.

const apiBase = import.meta.env.VITE_API_BASE;

Продакшен-сборка всё ещё работа бандлера

Для финального результата проект собирается и минифицируется, ресурсы хешируются для кэширования, а динамические импорты становятся отдельными чанками. Соглашения обычного проекта на JavaScript — модули, динамический импорт, ресурсы, на которые ссылаются из исходников, — переносятся без изменений.

Практика

Измерьте цикл обратной связи

Запустите сервер разработки на проекте с несколькими сотнями модулей, отредактируйте один компонент и засеките, сколько времени пройдёт до появления изменения. Затем сделайте то же в сборке на бандлере, если такая доступна.

Готово, когда: вы можете назвать время до обновления для каждого и объяснить, почему подход с раздачей модулей не растёт вместе с размером нетронутого кода.

Разделите одну тяжёлую зависимость динамическим импортом

Найдите самую большую зависимость в собранном проекте и загрузите её динамическим импортом, вызванным тем взаимодействием, которому она нужна.

Готово, когда: продакшен-сборка выпускает её отдельным чанком, и первая загрузка страницы больше её не запрашивает.

Частые ошибки

Ожидание горячей замены в продакшен-сборке — в собранном результате нет сервера разработки, и механизм обновления отсутствует; исправить: относитесь к HMR как к возможности только для разработки.
Секрет в переменной окружения с префиксом — он компилируется в публичный бандл; исправить: держите секреты на серверной стороне.
Перезапуск сервера при каждой правке зависимости без причины — кэш предсборки может быть ещё действителен; исправить: прочитайте сообщение, прежде чем перезапускать.
Публикация результата сервера разработки — он не собран в бандл и не хеширован; исправить: собирайте для продакшена и разворачивайте собранный каталог.
Убеждение, что инструмент компилирует TypeScript с проверкой типов — он снимает типы, не проверяя их; исправить: запускайте компилятор отдельно, в конвейере.

Что читать дальше

Управление пакетами (npm) (02-frontend/04-package-management-npm) — как устанавливаются зависимости, которые предсобираются.
Webpack (02-frontend/24-webpack) — модель собранного графа, вокруг которой проектировался этот инструмент.
Модули и инструменты (02-frontend/06-javascript/04-modules-and-tooling) — семантика модулей, которую реализуют оба инструмента.