Vite

Сегодня я рад объявить об официальном релизе Vite 2.0!

Vite (французское слово означает быстрый, произносится /vit/ ("вит" при. пер.)) - это новый вид инструментов сборки для веб-разработки. Подумайте о предварительно сконфигурированном dev-сервере + сборщик, но более компактном и быстром. Он использует встроенную в браузер поддержку ES модулей и инструменты, такие как esbuild, для быстрого и современного опыта разработки.

Чтобы понять, насколько быстро работает Vite, вот видео сравнение загрузки приложения React на Repl.it с использованием Vite и create-react-app (CRA):

Если вы никогда раньше не слышали о Vite и хотели бы узнать о нем больше, ознакомьтесь с обоснованием этого проекта. Если вам интересно, чем Vite отличается от других аналогичных инструментов, посмотрите сравнения.

Что нового в версии 2.0

Поскольку мы решили полностью реорганизовать внутреннее устройство до того, как версия 1.0 вышла из RC, это фактически первая стабильная версия Vite. Тем не менее, Vite 2.0 имеет много значительных улучшений по сравнению с предыдущим воплощением:

Агностическое ядро фреймворка

Первоначальная идея Vite зародилась как хакерский прототип, который обслуживает однофайловые компоненты Vue через ESM. Vite 1 был продолжением этой идеи с реализованным HMR поверх.

Vite 2.0 вобрал то, что мы узнали в процессе, но был переработан с нуля с более надежной внутренней архитектурой. Теперь он полностью независим от фреймворка, а вся специфичная для фреймворков функциональность делегируется плагинам. В настоящее время существуют официальные шаблоны для Vue, React, Preact, Lit Element и продолжается интеграции Svelte усилиями сообщества.

(Смотрите так же Awesome Vite - Прим. Пер.)

Новый формат плагинов и API

Вдохновленная WMR, новая система плагинов расширяет интерфейс плагинов Rollup и совместима со многими плагинами Rollup из коробки. Плагины могут использовать перехватчики, совместимые с Rollup, с дополнительными перехватчиками и свойствами, специфичными для Vite, для настройки поведения исключительно для Vite (например, различное поведение при разработке и сборке или настраиваемая обработка HMR).

Программный API также был значительно улучшен, чтобы упростить работу с инструментами / фреймворками более высокого уровня, созданными на основе Vite.

Предварительная сборка зависимостей используя esbuild

Поскольку Vite является собственным сервером разработки и использует ESM, он предварительно собирает и упаковывает зависимости, чтобы уменьшить количество запросов браузера и обрабатывать преобразование CommonJS в ESM. Раньше Vite делал это с помощью Rollup, а в версии 2.0 используется esbuild, что приводит к 10-100-кратному ускорению предварительной сборки зависимостей. Для справки, холодная загрузка тестового приложения с тяжелыми зависимостями, такими как React Meterial UI, раньше занимала 28 секунд на Macbook Pro с процессором M1, а теперь занимает ~1,5 секунды. Ожидайте аналогичных улучшений, если вы переходите с традиционной установки на основе сборщика.

Первоклассная поддержка CSS

Vite рассматривает CSS как важную часть графа модулей и поддерживает следующее из коробки:

1. Улучшение преобразователя: пути @import и url() в CSS улучшены с помощью преобразователя Vite для учета псевдонимов и зависимостей npm.

2. Перебазирование URL: пути url() автоматически изменяются независимо от того, откуда импортируется файл.

3. Разделение CSS кода: отделённый фрагмент JS также генерирует соответствующий отдельный файл CSS, который автоматически загружается параллельно с фрагментом JS по запросу.

Server-Side Rendering (SSR) Support

Vite 2.0 поставляется с экспериментальной поддержкой SSR. Vite предоставляет API-интерфейсы для эффективной загрузки и обновления исходного кода на основе ESM в Node.js во время разработки (почти как HMR на стороне сервера) и автоматически экстернализирует совместимые с CommonJS зависимости для повышения скорости разработки и сборки SSR. Продуктовый сервер можно полностью отделить от Vite, и ту же настройку можно легко адаптировать для выполнения предварительного рендеринга / SSG.

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

Поддержка устаревших браузеров

Vite по умолчанию нацелен на современные браузеры с собственной поддержкой ESM, но вы также можете получить поддержку устаревших браузеров через официальный @vitejs/plugin-legacy. Плагин автоматически создает двойные modern/legacy пакеты и предоставляет правильный пакет на основе браузера, обеспечивая более эффективный код в современных браузерах.

Попробуйте!

Это было много изменений, но начать работу с Vite просто! Вы можете запустить приложение на базе Vite буквально за минуту, начиная со следующей команды (убедитесь, что у вас Node.js> = 12):

npm init @vitejs/app

Затем ознакомьтесь с руководством, чтобы узнать, что Vite предлагает из коробки. Вы также можете проверить исходный код на GitHub, следить за обновлениями в Twitter или присоединиться к обсуждениям с другими пользователями Vite на нашем сервере чата Discord.