✌️🆚⚛️ Vite vs CRA: почему разработчики массово переходят на новый инструмент

Почему Create React App теряет позиции и как Vite решает главные проблемы современной React-разработки. Личный опыт миграции и сравнение производительности.

Привет, друзья! Я Кирилл Мыльников, frontend-разработчик в ГК Юзтех. Сегодня хочу с вами обсудить, что лучше выбрать: Vite или Create React App (CRA). На протяжении длительного времени CRA был основным вариантом для разработки приложений на React. Однако с развитием технологий становится ясно, что системы усложняются, и CRA может не обеспечить необходимую скорость и производительность приложений. Сейчас на рынке появился инструмент сборки под названием Vite, который считается современным и предоставляет надежные функции. Возможно, возникает некоторая неопределенность при выборе между CRA и Vite. В этой статье мы точно выясним, что нам лучше подходит. Поехали)

Create React App (CRA) является популярным инструментом, созданным на основе Babel и Webpack, с целью быстрой настройки проекта React. Этот инструмент получил официальную поддержку от команды React, что делает его надежным выбором для разработчиков.

CRA предлагает предварительно настроенную среду, которая решает множество задач по конфигурации, освобождая разработчиков от этой рутины. Это позволяет разработчикам сосредоточиться на написании кода, не тратя время на настройку файлов конфигурации. Кроме того, CRA обладает возможностью генерации скриптов и управления зависимостями.

Важные особенности CRA включают в себя сборку для продакшена, горячую замену модулей и локальный сервер разработки. Тем не менее, по мере роста приложения его производительность и скорость могут ухудшаться.

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

1. Официальная поддержка инструмента Create React App (CRA) со стороны команды React является огромным преимуществом для всех разработчиков, использующих React в своих проектах. Это гарантирует, что команда React возьмёт на себя ответственность за исправление ошибок, добавление новых функциональностей и регулярные обновления CRA.
2. Зрелая экосистема CRA также играет важную роль в его популярности. Благодаря поддержке широкого и активного сообщества разработчиков, вокруг инструмента существует множество сторонних плагинов и ресурсов. Разработчики могут легко находить руководства, документацию и поддержку онлайн при необходимости, что делает CRA удобным и доступным для использования в различных сценариях разработки.
3. Автоматическая конфигурация в CRA освобождает разработчиков от необходимости создавать и настраивать сложные конфигурационные файлы, позволяя им сосредоточиться на написании кода. Это значительно ускоряет процесс разработки и упрощает взаимодействие с инструментом, особенно для новичков.

Как работает CRA

CRA работает в таком порядке

1. Webpack формирует дерево зависимостей модулей вашего проекта, начиная с файла index.js, который выступает в качестве точки входа в ваше приложение.
2. Далее Babel транспилирует ваш код
3. После чего CRA объединяет ваш код и передает его через веб-сервис Express
4. В конечном итоге, Create React App (CRA) настраивает плагины для управления горячей заменой модулей.

Быстрый подход к разработке программного обеспечения с акцентом на написание кода является одним из ключевых преимуществ Create React App (CRA). Однако, несмотря на все его плюсы, существует заметный недостаток. При каждом изменении в коде React, Webpack будет заново собирать проект, независимо от того, насколько мелкие или крупные изменения.

Это может замедлить процесс разработки приложения React, так как увеличивается объем исходного кода, что ведет к увеличению времени, требуемого для запуска сервера разработки и компиляции проекта.

Поговорим о Vite

Vite – это инструмент сборки, основанный на Rollup bundler, является современным решением, созданным с целью устранения ограничений и оптимизации существующих инструментов. Он специально разработан для обеспечения высокой скорости и производительности в процессе сборки проекта.

Vite использует собственный сервер разработки, импорт модулей браузера и модули ECMAScript для обеспечения эффективной и бесперебойной разработки приложений с высокой скоростью сборки. Особенностью Vite является возможность его сервера разработки отправлять несколько ответов на один клиентский запрос с применением HTTP/2 server push.

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

Преимущества Vite

1. Vite поражает обширной экосистемой плагинов, позволяющей интегрироваться с различными инструментами для расширения функциональности. Этот гибкий инструмент обеспечивает поддержку нескольких фреймворков разработки, включая React и Svelte, делая его удобным выбором для разработчиков.
2. Быстрая разработка является одним из ключевых преимуществ Vite.. Использование импорта собственных модулей ECMAScript позволяет избежать необходимости ручного связывания во время разработки, а также предоставляет предварительно объединенные модули и зависимости, ускоряя процесс разработки. Благодаря молниеносному серверу разработки, время сборки сокращается до минимума.
3. С учетом оптимизации размеров кода, Vite предлагает функции такие как tree-shaking и ленивая загрузка модулей, которые помогают уменьшить размер кода и оптимизировать его для повышения производительности. Эти возможности особенно полезны при работе над проектами с большим количеством модулей, ускоряя процесс разработки и повышая эффективность разработчиков.
4. Наконец, гибкие конфигурации Vite позволяют настраивать каждый аспект проекта React в соответствии с уникальными требованиями. Эта гибкость делает Vite идеальным инструментом для широкого спектра проектов, обеспечивая разработчикам возможность создавать оптимальные решения под свои нужды.

Как работает Vite?

В ходе разработки Vite осуществляет два основных процесса: локальное обслуживание кода и объединение CSS и JavaScript вместе с другими ресурсами для производственного использования.

Проблема, с которой сталкиваются многие разработчики при использовании инструментов, таких как Webpack, Rollup и Parcel, заключается в том, что с каждым обновлением кода приходится ожидать несколько секунд на пересборку проекта. Даже при использовании горячей перезагрузки, производительность проекта снижается с увеличением количества кода. К счастью, Vite предлагает инновационный подход к этой проблеме.

Vite стартует с локального сервера и использует неизменяемые зависимости для ускорения процесса разработки. Сочетание этой стратегии с использованием быстрого компилятора esbuild позволяет быстро объединять и обновлять зависимости в реальном времени, минимизируя время ожидания. В результате у разработчиков появляется возможность наблюдать изменения моментально, не отвлекаясь на длительные пересборки проекта.

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

В современных веб-браузерах Vite позволяет использовать встроенные модули ECMAScript для обработки исходного кода. Этот подход позволяет браузеру самостоятельно упаковывать код, обеспечивая мгновенную загрузку вашего приложения, даже при увеличении его объема. Благодаря использованию собственных модулей браузера, Vite обеспечивает мгновенный доступ к ресурсам и улучшает производительность приложения.

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

Разница между Vite и CRA

Производительность

При предварительной сборке Vite использует модули ECMAScript для преобразования зависимостей с различными внутренними модулями в один модуль. При раздельном размещении эти модули могут отправлять сотни запросов одновременно, перегружая браузер и замедляя время загрузки, Однако после предварительного объединения их в один модуль , он может отправить только один запрос, что повышает производительность приложения. CRA не имеет предварительного объединения, а без него запускаются сотни запросов, отсюда вытекает ухудшение производительности.

Конфигурация

Одной из причин, почему разработчики выбирают CRA, является настройка с нулевой конфигурации. Можно запустить приложения после установки, одной командой. Несомненно, это может сказаться на гибкости CRA, потому что вам придется расширять возможности при работе с большими проектами.

Vite позволяет добавлять новые возможности этому инструменту сборки, быстро написав плагин Rollap. Rollap имеет обширную экосистему для создания среды разработки.

Эффективные и высокопроизводительные сборки

Vite помогает вам создавать оптимизированные производственные сборки при помощи заранее настроенных команд, таких как tree shake, асинхронная загрузка чанков и разделение CSS-кода. Это позволяет вам поддерживать меньшие размеры пакетов и повышает производительность сборки.

Сервер разработки Vite, используя модули ECMAScript, автоматически импортирует зависимости, что устраняет необходимость в бандлинге. Благодаря этому ускоряется скорость сборки, что, в свою очередь, улучшает производительность проекта.

Богатые возможности

CRA полностью собирает приложение перед предоставлением, в то время как Vite разделяет модули React на 2 категории:

1. Зависимости: Это простой JavaScript, который не изменяется во время разработки. Vite использует esbuild для их предварительной обработки, что обеспечивает один HTTP-запрос на каждую зависимость. Поскольку они остаются постоянными, зависимости легко кэшируются. Это позволяет пропустить этап предварительной сборки.
2. Исходный код: Это не простой JavaScript, который изменяется со временем. Его необходимо постоянно редактировать, модифицировать и обновлять в соответствии с требованиями. Vite использует собственные модули ECMAScript для работы с исходным кодом. Это способствует ускорению времени запуска сервера разработки.

Миграция с CRA на Vite

Ниже будут приведены минимальные шаги миграции с CRA на Vite

1. Удалить react-scripts. При подготовке к миграции первым шагом нужно удалить CRA из вашего проекта путем удаления react-scripts

npm uninstall react-scripts

2. Установить vite со всеми его зависимостями

npm install vite @vitejs/plugin-react --save-dev

3. Редактирование package.json

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
}

4. Переместите index.html файл в корневой каталог проекта. Переместите ваш public/index.htmlфайл в корневой каталог вашего проекта и измените тег script соответствующим образом.

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
    
  <script type="module" src="/src/index.jsx"></script>
</body>

5. Добавьте vite.config.js файл в корневой каталог проекта. Чтобы настроить Vite для вашего проекта, обязательно добавьте vite.config.js файл в корень вашего проекта.

// vite.config.js
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});

6. Измените .env-файл, чтобы использовать env переменные. Если у вас есть .env файлы, всегда добавляйте к имени переменной среды префикс VITE_

VITE_SOME_KEY=123

VITE_SOME_KEY будет использоваться в качестве import.meta.env.VITE_SOME_KEY исходного кода вашего клиента.

console.log(import.meta.env.VITE_SOME_KEY); // "123"

7. Запустите проект командой:

npm run dev

Ну вот и все! Мы перешли с вами на Vite, поздравляю :)

Заключение

Эта статья предлагает подробное сравнение между CRA и Vite, описывая причины и процесс переноса проекта React с одной платформы на другую. Несомненно, в этом вопросе имеются разные точки зрения и аргументы.

Какие еще преимущества Vite вы заметили в своих проектах? Расскажите о своем опыте использования.