Анонс 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 через родные ES-модули. 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-сервере.