Анонс Vite 2.0

16 февраля 2021 - посмотрите анонс Vite 3.0

Сегодня мы рады объявить о официальном выпуске Vite 2.0!

Vite (французское слово, означающее «быстрый», произносится как /vit/) — это новый тип инструмента сборки для фронтенд-разработки веб-приложений. Представьте себе преднастроенный сервер разработки в сочетании со сборщиком, но более лёгким и быстрым. Он использует встроенную поддержку 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.

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

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

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

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

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

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

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

• Улучшение резолвера: пути @import и url() в CSS улучшаются с помощью резолвера Vite, чтобы учитывать алиасы и зависимости npm.
• Перенастройка URL: пути url() автоматически перенастраиваются независимо от того, откуда файл импортируется.
• Разделение кода CSS: JS-чанк, разделённый по коду, также создает соответствующий CSS-файл, который автоматически загружается параллельно с JS-чанком по запросу.

Поддержка серверного рендеринга (SSR)

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

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

Опциональная поддержка устаревших браузеров

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

Попробуйте это!

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

npm init @vitejs/app

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