### Причины перехода с Create React App на Vite
Create React App (CRA) долгое время использовался как стандартный инструмент для создания React-приложений без ручной настройки сборки. Однако по мере роста проектов и усложнения фронтенд-экосистемы стали проявляться ограничения архитектуры CRA: медленный старт dev-сервера, перегруженная конфигурация, зависимость от Webpack и сложность кастомизации без eject.
Vite предлагает иной подход к разработке: использование нативных ES-модулей в dev-режиме и сборки на базе Rollup. Это радикально ускоряет запуск проекта и обновление модулей при изменениях кода.
Ключевые различия, влияющие на миграцию:
* CRA использует Webpack и bundling на старте
* Vite использует ESM и подгружает модули по требованию
* горячая перезагрузка в Vite работает точечно на уровне модулей
* конфигурация Vite намеренно минималистична и расширяется через плагины
---
### Архитектурные различия, влияющие на миграцию
Переход с CRA на Vite нельзя рассматривать как простую замену инструмента сборки. Меняется сама модель обработки приложения.
В CRA входная точка всегда скрыта внутри `react-scripts`, тогда как в Vite она явно задаётся через `index.html`, который становится частью графа зависимостей.
Особенности Vite:
* `index.html` находится в корне проекта
* скрипт подключения приложения указывается явно
* обработка ассетов идёт через import-механику
* dev-server не бандлит весь проект заранее
В CRA:
* HTML генерируется внутри build pipeline
* конфигурация скрыта внутри `react-scripts`
* расширение поведения требует eject или CRACO
---
### Подготовка проекта к миграции
Перед переходом важно провести инвентаризацию CRA-проекта:
* кастомные webpack-конфиги (если есть eject или CRACO)
* переменные окружения `.env`
* алиасы импортов
* обработка SVG и статических ресурсов
* proxy настройки API
* тестовый стек (Jest)
Типичный CRA-проект содержит:
```
src/
public/
package.json
.env
```
В Vite структура сохраняется, но добавляется:
```
vite.config.js
index.html (в корне)
```
---
### Установка Vite и базовая конфигурация
Замена CRA на Vite начинается с удаления зависимостей `react-scripts` и установки Vite:
```bash
npm install vite @vitejs/plugin-react
```
Далее создаётся конфигурационный файл:
```js
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()]
})
```
Плагин `@vitejs/plugin-react` заменяет функциональность Babel внутри CRA: JSX трансформация, Fast Refresh и поддержка React Refresh runtime.
---
### Перенос entry point и index.html
В CRA входной файл скрыт в `src/index.js`. В Vite он остаётся, но подключается иначе.
Было (CRA):
```js
ReactDOM.createRoot(document.getElementById('root')).render(
)
```
Структура HTML скрыта.
Стало (Vite):
```html