Сегодня зашел с коллегой разговор про скорость работы Hot Reload при разработке React приложений. Я ему рассказал про то, что попробовал запуск из WSL и что все быстрее обновляется. Речь про чистый React, не для SPFX. Меня спросили, как я создаю проект и как он у меня работает. И оказалось, что не всегда использовать старые проверенные методы есть хорошо.
Я много лет использую create-react-app для средней сложности проектов – не надо вручную обновлять webpack, подключать и настраивать загрузчики. В течение 2-3 минут все пакеты загружены и начинаешь.
Сегодня я узнал про Vite. Это сравнительно новое средство для создания современных веб-приложений.
Решил попробовать. С помощью 'npm create vite@latest' начал создание приложения.
npm create vite@latestДалее выбрал его параметры. Тут не только React, но и куча других библиотек. Выбрал свои привычные React + TS. На создание проекта ушли реально считанные секунды.
Дальше скопировал несколько компонент из своего проекта и запустил. Hot Reload отрабатывает практически моментально, заметно быстрее чем в приложении, созданном с помощью Create-react-app.
Из некоторых особенностей - тут нет React-scripts, потому под линуксом не надо давать права на их запуск.
Обновить process.env
Как следствие из выше написанного про React-scripts - нет поддержки process.env, но это легко исправить. Переменные берутся из файла .env в корне проекта, синтаксис аналогичный, только начинаться они должны с VITE_.
const VITE_APP_ENV = import.meta.env.VITE_APP_ENV