Vite – это инструмент относящийся к инструментам сборки для веб-разработки. Он использует ES6 модули (es imports, ESM) на этапе разработки (для запуска приложений в dev режиме) и Rollup на этапе компиляции приложения (сборки в prod режиме).
В dev режиме Vite позволяет нам получить быстрый “холодный” запуск сервера с мгновенной горячей заменой модулей (HMR). Тоесть на этапе разработки не понадобится сборка приложения, что сильно ускорит работу для больших приложений с множеством JS компонентов.
Подключение модулей в dev режиме происходит непосредственно в браузере, который уже понимает <script module> и отправляет http запрос для каждого импорта. А сервер компилирует на лету нужный vue компонент. Вот почему “холодный запуск” сервера и замена модулей HMR работают очень быстро и не зависят сильно от числа компонентов в приложении.
Это не первый инструмент, который работает так. Например, существуют такие проекты, как @web/dev-server (es-dev-server) и snowpack. В документации к Vite написано, что команда была вдохновлена этими проектами в начале разработки. Но своей инструмент они стараются сделать лучше.
@web/dev-server – более низкоуровневый проект и требует в некоторых аспектах ручной настройки. Таким образом Vite старается обеспечить процесс, который работает из коробки.
В snowpack можно подключать различные системы сборки, но платой за универсальность является менее тесная интеграция с ними и потеря доступности части оптимизаций. За счет тесной интеграции только с одним инструментом сборки для prod (Rollup) в Vite доступен широкий спектр функций оптимизаций. Vite обеспечивает более совершенную поддержку Sass и Less, включая улучшенное разрешение @import (псевдонимы и зависимости npm) и автоматическое изменение адресации url () для встроенных файлов.
Что же нового в версии Vite 2.0?
Первоначально Vite создавался как будущая основа инструментария Vue.js. Хотя начиная с версии 2.0 Vite теперь полностью независим от фреймворка, официальный плагин Vue по-прежнему обеспечивает первоклассную поддержку формата Vue Single File Component, охватывая все расширенные функции. Кроме того, Vite предоставляет детализированный HMR для Vue Single File Components (SFC). Например, при обновлении секций <template> или <style> SFC будут выполняться «горячие» обновления без сброса его состояния.
Новый формат плагина и API. Плагины могут использовать перехватчики (hooks), совместимые с Rollup, с дополнительными перехватчиками (hooks) и свойствами, специфичными для Vite, для настройки поведения только для Vite (например, различие между разработкой и сборкой или настраиваемая обработка HMR).
Предварительная сборка esbuild Powered Dep. Поскольку Vite является собственным сервером разработки ESM, он предварительно связывает зависимости, чтобы уменьшить количество запросов браузера и обрабатывать преобразование CommonJS в ESM. Раньше Vite делал это с помощью Rollup, а в версии 2.0 теперь используется esbuild, что приводит к 10-100-кратному ускорению предварительной сборки зависимостей. Для справки, холодная загрузка тестового приложения с тяжелыми зависимостями, такими как React Meterial UI, раньше занимала 28 секунд на Macbook Pro с процессором M1, а теперь занимает ~ 1,5 секунды.
Уделено большое внимание CSS, как уже упоминалось выше.
Vite 2.0 поставляется с экспериментальной поддержкой SSR. Vite предоставляет API-интерфейсы для эффективной загрузки и обновления исходного кода на основе ESM в Node.js во время разработки (почти как HMR на стороне сервера) для повышения скорости разработки и сборки SSR.
У Vite много возможностей. Его можно установить за пару секунд и начать знакомиться ближе:
npm init @vitejs/appА чем при dev разработке пользуетесь вы в данный момент? Пишите в комментариях.