Почему я использую Vite вместо CRA

Коротко. Скорость dev-сервера и сборки.

Суть

Vite даёт мгновенный dev-сервер на esbuild и сборку через Rollup — для лендингов и SPA это быстрее Create React App без eject.

Ниже — практика без лишней теории: что делаю в реальных проектах (лендинги, визитки, MVP).

Почему ушёл с CRA

CRA тянет тяжёлый webpack-dev-server, долго стартует на больших проектах и плохо дружит с современным tree-shaking. Vite отдаёт модули нативно в браузере — правки видны за доли секунды.

Что проверяю перед миграцией

• Нет ли зависимостей на react-scripts в кастомных скриптах.
• Все env-переменные переименованы в VITE_*.
• Публичные ассеты лежат в public/, импорты — через import.

Типичные промахи

Путают process.env и import.meta.env, забывают base path для деплоя на подпапку, оставляют CommonJS-плагины без адаптера.

npm create vite@latest my-app -- --template react-ts
cd my-app && npm i && npm run dev

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  build: { outDir: 'dist', sourcemap: false },
})

// .env — только с префиксом VITE_
VITE_API_URL=https://api.example.com

Как применять на проекте

• Зафиксируйте минимальный стек в README и не добавляйте библиотеки «на будущее».
• Договоритесь о структуре папок до второй недели — позже рефактор дороже.
• Каждый PR: линтер, типы, preview-ссылка для заказчика.
• Для MVP — один layout, переиспользуемые компоненты, без преждевременного микрофронта.

Если задача — лендинг на 5 блоков, React иногда избыточен; честно проверьте, нужен ли он сейчас.

Типичные ошибки

Перегруз эффектами и библиотеками «на всякий случай»; отсутствие проверки на слабом интернете и старых телефонах; копирование чужого дизайна без адаптации под свою аудиторию; отсутствие явного CTA; ожидание, что «сайт сам продаст» без трафика и оффера.

Для коммерческих проектов отдельно болит размытое ТЗ и бесконечные правки без доплаты — лечится этапами и лимитом итераций.

Когда имеет смысл привлечь разработчика

Если нужен не шаблон, а связка дизайна, скорости, интеграций и сопровождения — проще обсудить задачу один раз, чем чинить конструктор полгода. Я беру лендинги, визитки и MVP под ключ; ориентиры по срокам и бюджету — на странице цен.

Читать дальше

• Core Web Vitals — метрики скорости
• Vite вместо CRA — стек сборки
• Услуги — разработка под задачу

Короткие ответы на частые вопросы

Это подойдёт моему бизнесу? Если вам нужен понятный сайт с заявкой или звонком — да; если десятки кабинетов и сложная логика — обсудим отдельный объём.

Что подготовить до старта? Тексты или тезисы, логотип, примеры конкурентов, доступы к домену и хостингу (если уже есть).

Как оценить результат? Скорость на мобилке, ясный CTA, отсутствие «битых» блоков и совпадение страницы с рекламой/поисковым запросом.

Итог по теме «Почему я использую Vite вместо CRA»

Сфокусируйтесь на сценарии пользователя, а не на количестве фич. Остальное — вопрос исполнения и дисциплины в проекте. Готов помочь с оценкой — контакты или Telegram из кнопки ниже.