Vite

Vite — это современный инструмент сборки, созданный Эваном Ю (автором Vue.js), который использует нативные ES-модули браузера для обеспечения мгновенного старта сервера разработки. Он стал популярной альтернативой Create React App благодаря скорости и простоте.

Создание проекта

Чтобы создать React-проект с Vite, выполните:

npm create vite@latest my-app -- --template react

Эта команда:

  • Запрашивает имя проекта и шаблон.
  • Создаёт папку my-app с минимальной структурой.
  • Устанавливает зависимости для React и Vite.

Запуск проекта

Перейдите в папку проекта и запустите сервер:

cd my-app
npm install
npm run dev

Приложение откроется по адресу, например, http://localhost:5173. Сервер запускается почти мгновенно, даже в крупных проектах.

Особенности Vite

  • Использует нативные ES-модули: не собирает весь проект при старте, а подгружает файлы по запросу.
  • Поддерживает горячую замену модулей (HMR) на уровне отдельных компонентов — изменения отображаются быстрее.
  • Включает встроенную поддержку TypeScript, JSX, CSS-модулей и PostCSS без дополнительной настройки.
  • Производит лёгкую и быструю production-сборку с помощью Rollup.

Преимущества перед CRA

  • Значительно быстрее запускается и перезагружается.
  • Меньше зависимостей и «мёртвого» кода в проекте.
  • Проще кастомизировать конфигурацию через файл vite.config.js.
  • Активно развивается и поддерживает современные веб-стандарты.

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

В рамках этого курса - для выполнения заданий мы будем использовать Vite