Vite 2.0 официально выпущен!
Vite (по-французски «быстро», произносится как /vit/, похоже на veet) — совершенно новый инструмент для разработки интерфейса. Вы можете думать об этом как о готовой комбинации сервера разработки + инструмента для упаковки, но легче и быстрее. Vite использует встроенную в браузер поддержку модуля ES и инструменты разработки, скомпилированные в собственный язык (например, esbuild), чтобы обеспечить быструю и современную разработку.
Насколько быстр Вите? существуетRepl.itЗапустите приложение React на основе Vite с нуля, и когда страница браузера будет загружена, CRA (create-react-app) даже не установит зависимости.
Если вы не слышали, что такое Vite, вы можете перейти кздесьУзнайте, для чего был разработан проект. Если вы хотите узнать разницу между Vite и некоторыми другими подобными инструментами, вы можете обратиться сюдаВ сравнении.
Что приносит 2.0
Хотя Vite 1.0 уже выходил на стадию RC, перед выпуском мы решили провести полный рефакторинг, чтобы устранить некоторые недостатки дизайна. Таким образом, Vite 2.0 на самом деле является первой стабильной версией Vite. 2.0 приносит массу улучшений:
Поддержка нескольких кадров
Первоначально Vite сосредоточился на поддержке однофайловых компонентов Vue, но 2.0 обеспечивает более стабильную и гибкую внутреннюю архитектуру, основанную на предыдущем опыте, так что любая структура может полностью поддерживаться с помощью механизма плагинов. Теперь Vite предоставляет официальные шаблоны проектов Vue, React, Preact, Lit Element, а сообщество Svelte также разрабатывает решения для интеграции Vite.
Новый механизм плагинов и API
Вайт 2.0WMRВдохновленный дизайном, основанным на API плагина Rollup.Многие плагины Rollup напрямую совместимы с Vite.. Плагины могут использовать некоторые дополнительные API-интерфейсы, специфичные для Vite, в дополнение к использованию плагина Rollup для обработки некоторых требований, которых нет в упаковке, таких как различение разработки и упаковки или обработка пользовательских горячих обновлений.
ВитеJS APIОн также был значительно улучшен — многие пользователи уже разрабатывают фреймворки верхнего уровня на основе Vite, и команда Nuxt также проверила возможность первоначальной интеграции в Nuxt 3.
зависимости на основе esbuild предварительно упакованы
Поскольку Vite — это собственный сервер разработки на основе ESM, нам нужно полагаться на предварительно упакованные компоненты для достижения двух целей при запуске: 1. Сокращение количества модулей/запросов 2. Поддержка зависимостей CommonJS. Предварительную упаковку нужно выполнять только при изменении зависимостей, но в проектах с большим количеством зависимостей каждое выполнение может занимать много времени. Vite использовал Rollup для выполнения этого процесса, а в версии 2.0 мы перешли на esbuild, что ускорило процесс в десятки раз. Холодный запуск проекта, на подготовку которого раньше уходило почти 30 секунд, теперь занимает меньше двух секунд! Переход с веб-пакета или других сборщиков на Vite должен привести к аналогичным улучшениям скорости.
Улучшенная поддержка CSS
Vite рассматривает CSS как первоклассного гражданина в модульной системе и имеет встроенную поддержку:
- Усовершенствованный синтаксический анализ путей: пути @import и url() в CSS разрешаются с помощью синтаксического анализатора пути Vite для поддержки псевдонимов и зависимостей npm.
- Автоматическая перезапись URL-адресов: все пути url() автоматически перезаписываются, чтобы убедиться, что они указывают на правильные пути к файлам как при разработке, так и при сборке.
- Разделение кода CSS: каждый разделенный файл JS автоматически генерирует соответствующий файл CSS во время сборки, и два файла будут автоматически загружаться параллельно по требованию.
Поддержка рендеринга на стороне сервера (SSR)
Вите 2.0 предлагаетЭкспериментальная поддержка SSR. Vite предоставляет гибкий API для эффективной загрузки исходного кода ESM непосредственно в Node.js (а также для получения точных обновлений без упаковки). Зависимости, предоставляющие версию CommonJS, автоматически загружаются непосредственно во время SSR, минуя преобразования. В производственной среде сервер может быть полностью отделен от Vite. Архитектура на основе Vite SSR также может легко выполнять статический предварительный рендеринг (SSG).
Поддержка старого браузера
По умолчанию Vite поддерживает только современные браузеры, изначально поддерживающие ESM, но вы можете использовать официальный@vitejs/plugin-legacyдля поддержки старых браузеров. Устаревший плагин автоматически сгенерирует дополнительный пакет для старых браузеров и вставит код в html для выборочной загрузки соответствующего пакета в соответствии с поддержкой браузера ESM (аналогично современному режиму vue-cli).
попробуй!
Есть много функций, но на самом деле очень просто попробовать. Всего за минуту вы можете быстро настроить проект на основе vite с помощью следующей команды (убедитесь, что ваша версия Node.js >=12):
npm init @vitejs/app
Эта статья воспроизведена с разрешения автора You Yuxi, оригинальный адрес:zhuanlan.zhihu.com/p/351147547
PS: вкладка Vite также онлайн:juejin.cn/tag/Vite