Vite (Vue Next)

Vite - это еще один инструмент для создания веб-приложения, который использует es6 модули на этапе разработки и Rollup на этапе компиляции приложения.

• Быстрый "холодный" запуск сервера
• Мгновенная горячая замена модулей (HMR)
• Настоящая компиляция по-требованию

Почему и как?

Чем отличается от vue-cli и других сборщиков?

Основное отличие в том, что в Vite нет сборки на этапе разработки. es imports в исходном коде используются непосредственно в браузере, браузер работает напрямую с <script module>, отправляя HTTP-запросы для каждого импорта. Сервер разработки перехватывает это запросы и преобразует если это необходимо. Например при импорте .vue файла он будет скомпилирован "на лету" перед тем как отправлен обратно в браузер.

Преимущества такого подхода

• Поскольку нет необходимости сборки, сервер запускается экстремально быстро
• Код компилируется только по-запросу (по необходимости), то есть только код необходимый для текущего экрана (страницы) будет скомпилирован. Нет необходимости ждать пока будет скомпилировано все приложение для начала разработки. Это может дать значительный эффект в приложениях с десятками экранов (страниц).
• HMR (горячая замена модулей), скорость замены не зависит  от общего количества модулей. Это делает HMR быстрым и стабильным независимо от размера приложения.

И наконец, поскольку компиляция все еще выполняется на стороне Node, технически она может поддерживать любое преобразование кода, поддерживаемое сборщиком. Vite предлагает команду vite build, которая все необходимое для сборки приложения.

В чем разница с es-dev-server?

es-dev-server - отличный проект и Vite во многом вдохновлен именно им, на ранних стадиях разработки. Тем не менее, вот почему мы сделали Vite, а es-dev-server

• Одно из основных целей Vite предоставить поддержку HMR, тогда как внутренняя реализация es-dev-server слишком непрозрачна, чтобы было возможно реализовать это с помощью промежуточного по (middleware)
• Vite стремиться быть инструментом, объединяющим процесс разработки и сборки приложения. Вы можете использовать один и тот же код в Vite для разработки и сборки, без каких либо дополнительных настроек.
• Vite больше внимания уделяет, как обрабатываются спец. версии импорта например css или статичные ресурсы. Здесь обработка схожа с vue-cli

В чем отличие от snowpack?

Snowpack и Vite предлагают серверы на основе импорта ES модулей. В Vite предварительная оптимизация зависимостей в значительной степени вдохновлена Snowpack v1. Оба проекты схожи по своим характеристикам производительности. В чем различия:

• Vite создан для работы с HMR на базе ESM. И когда Vite был выпущен, он был единственным проектом реализующим этот подход.  Snowpack 2 изначально не предлагал HMR на основе ESM, но затем  добавил ее. Это значительно сблизило проекты. Vite и Snowpack совместно работали на стандартами API для ESM HMR, но из-за разных стратегий реализации, все еще содержат различия в API.
• Оба решения могут собирать приложение для production. Но Vite использует Rollup со встроенной конфигурацией, тогда как Snowpack делегирует это Parcel/webpack через доп. плагины. В большинстве случаем финальная сборка в Vite быстрее и размер файлов меньше. Кроме того, более тесная интеграция с пакетом сборки, упрощает преобразование Vite и создание плагинов которые одновременно изменяют dev/build конфигурацию.
• в Vite - первоклассная  поддержка Vue. Например, Vite предлагает более детальную интеграцию HMR для Vue, а также оптимизированную настройку для сборки Vue приложений.