По сути это готовый набор инструментов, основные фичи:
⚡️ Очень быстрый dev-сервер;
⚙️ Hot Module Replacement (Сохраняешь файл, в браузере моментально обновляется только этот кусок);
🎛 Можно юзать TypeScript, SASS, JSX, есть starter templates для нескольких популярных фреймворков;
🥬 Rollup в качестве сборщика, а значит в итоговом билде не будет ничего, что не используется приложением;
Что впечатлило при разработке:
Реально быстрый dev-сервер, за секунду запускается. Проект на нём делался простенький, но я уже начал подумывать перенести свои React-проекты на него, потому что create-react-scripts и craco запускаются намного дольше;
Можно просто в html-файле прописать
<link href="/src/my-style.scss" />, и файл при билде станет css, ничего не надо настраивать;И в целом довольно большая гибкость — структуру проекта можно создать какую хочешь, это же просто набор инструментов, и оно просто работает.
Мой проект был относительно простой: несколько готовых лендингов, которые надо было доработать и наполнить контентом. Но я был впечатлён — достаточно было просто свалить их все в папку, прописать в конфиге пути до index.html, и открывать их в браузере по ссылке вида
localhost:5173/pages/landing1/ (слэш в конце обязателен!). Дальше я писал свои стили и логику и подключал их в index.html с атрибутом type="module" - ВСЁ.Вот как создать проект с настроенным TypeScript:
yarn create vite my-app --template vanilla-ts
Советую затестить Vite, особенно если стартуете новый небольшой проект 🤓
Допускаю, что на более сложных проектах могут возникнуть сложности. Я вот например немного встрял, когда понадобилось изображения при билде автоматически конвертить в WebP. Минут 30 гуглинга, и я этот вопрос решил. Осталась небольшая проблема: картинки конвертятся с помощью плагина, но он не работает, если ссылка на изображение прописана в HTML (даже если это одно и то же изображение). В итоге в бандле получаю image.jpg (который из html-файла) и image.webp (который я импортировал в .ts-файле). Пришлось пока приделать костыли.