Лет 6 назад мы начали мигрировать на React и для быстрого старта взяли CRA. С тех пор много воды утекло и этой осенью я и ещё один коллега начали искать альтернативы CRA.

Естественно, времени на это никто не выделял, поэтому нужно было отделаться “малой кровью”.

Попытка 1️⃣

Многие пишут, что буквально за полчаса мигрируют на Vite. Но есть нюанс: у нас не чистый CRA, а форк (подробнее тут).

Большая часть конфигурации оказалась довольно простой:

Vite по умолчанию поддерживает глобальные константы через define и алиасы
Мы поправили импорты SVG-файлов
Нашли, как обойти ограничение для umd и iife форматов, когда указано несколько энтрипоинтов

Но дальше мы упёрлись в неприятный момент.

⚠️ Мы встраиваемся в legacy-проект, где старый код ожидает синхронную загрузку скриптов.
А скрипты, собранные через Vite, нужно подключать с <script type="module">, который всегда асинхронный — сделать его блокирующим не получится. Убрать type="module" не выйдет иначе получите ошибку “Cannot use import statement outside a module”.

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

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

Попытка 2️⃣

Мы продолжили исследование и наткнулись на статью про замену babel-loader на esbuild-loader для ускорения сборки.

Решили попробовать. Вся магия из статьи сводится к простым шагам:

заменяем babel-loader на esbuild-loader
TerserPlugin — на EsbuildPlugin

⏱ Скорость билда выросла примерно на 30% (30 => 21 секунды)— уже приятно.

Но тут вылезла другая проблема: esbuild пока плохо справляется с tree shaking динамических импортов, и итоговый бандл раздулся почти в 2 раза пруф 1, пруф 2.

И тут мы снова вспомнили про Vite.

🎉 Попытка 3️⃣

Вдохновившись подходом Vite, мы решили пойти гибридным путём и комбинировать esbuild и babel для разных сценариев:

esbuild-loader — для разработки
babel-loader — для продакшена

В итоге нам удалось:

ускорить билд
сохранить размер бандла
и, что важно, уехать с CRA

CRA мы просто эджекнули, апгрейднули зависимости и внесли необходимые изменения под esbuild.

Был ещё один очень простой трюк, который позволил ускорить билд, ведь изначальное время билда было — 1 минута, но об этом в другой раз.

Расскажите, чем вы собираете свой фронтенд или ставьте:

😢 — если у вас всё ещё Create React App
👍 — если у вас Vite
🔥 — если у вас нестандартная сборка