Миграция с Webpack на Rspack: ускорение сборки Next.js в 2026

hannadev

Webpack уже давно стал болью для больших Next.js проектов - сборки растягиваются на минуты, HMR тормозит, а дев-опыт страдает. Rspack меняет правила игры: Rust-под капотом, совместимость с Webpack API и взрывной буст производительности. В этой статье разберём реальный прод-опыт миграции, ключевые шаги и метрики ускорения для Next.js приложений.

Если твои билды жрут время и ресурсы, переход на Rspack сократит их в 3-20 раз. Это не теория - команды уже гоняют его в проде полгода+, с минимальными правками конфига. Поговорим о стратегиях, подводных камнях и как интегрировать в Next.js без даунтайма.

Почему Rspack рвёт Webpack в Next.js

Rspack - это бандлер на Rust, который копирует Webpack API на 99%, но работает в разы быстрее за счёт SWC и нативной оптимизации. В Next.js он идеально ложится: поддерживает SSR, app router, Turbopack-фичи и даже Module Federation. Команды мигрируют большие монорепы (17Мб+ JS после бандла) и видят рост скорости сборки в 8 раз - с 30+ сек до 4 сек на M4 Pro.

Ключ в том, что Rspack не требует переписывания всего стека: loaders, плагины и конфиги переносятся с копипастой. Но есть нюансы с кастомными лоадерами и микрофронтами - их фиксят за 1-2 дня. В итоге девы фокусятся на фичах, а не на ожидании recompiles. Это подводит к сравнению: смотрим, где выигрыш максимален.

Метрика	Webpack	Rspack	Ускорение
Initial build	16-300с	4-80с	3-8x
HMR (hot reload)	7с	400мс	20x
Storybook build	2м25с	33с	88%
Memory usage	Высокое	Низкое	-30-50%

Initial build: Локальная сборка падает с 16с до 6с - реал-кейс из монорепо с 550+ React-компонентами.
HMR speedup: Горячая замена модулей - killer-фича для Next.js, где стейт и рендеры летают.
Storybook/CI: Время на CI/CD режет в 4 раза, плюс меньше памяти - экономия на облаке.

Стратегия миграции: gradual или all-in

Лучшие практики - начинать с флагом окружения, типа BUNDLER=rspack, чтобы параллельно тестить Webpack. В Next.js это просто: rspack-loader интегрируется в next.config.js, и ты переключаешь по шагам. Команды рекомендуют пилот на одном е: мигрируй config, добавь npm-скрипт, проверь SSR и dynamic imports.

All-or-nothing подходит для multi-app setup - меняешь webpack.config.js на rspack.config.js с массивом конфигов. Поддержка array configs - топ, плюс замена babel-loader на swc-loader даёт +40% спиддапа. Главное - прототипи локально, потом CI, и rollback-план через флаг. Это логично ведёт к шагам миграции.

Установи Rspack: npm i rspack rspack-loader @rspack/cli -D.
Замени loaders: css-loader -> встроенный, esbuild -> SWC.
Плагины: html-webpack-plugin -> rspack.HtmlWebpackPlugin, добавь CircularDependencyPlugin для дебага.
Next.js специфика: в next.config.js укажи experimental: { turbo: { rspack: { loader: 'rspack' } } }.

Нюанс: Для микрофронтов проверь ModuleFederationPluginV1 - работает out-of-box, но тесты на S3 hash collisions обязательны.

Подводные камни и фиксы в Next.js

Не всё гладко: кастомные loaders требуют портирования (~200 строк кода на слой совместимости), dynamic imports иногда глючат в деве с микрофронтами. В монорепо с опенсорс-дашбордами фиксили через новые релизы Rspack - теперь стабильная 1.0 версия решает 90% issю.

В Next.js фокус на app router и server components: Rspack их жрёт на ура, но для больших бандлов (>17Мб) мониторь circular deps. Команды правят самописные CLI за 2 дня, и вуаля - полгода в проде без вопросов. Переходим к таблице типичных проблем.

Проблема	Фикс	Время
Custom loaders	Портируй на Rust-эквиваленты	1 день
Microfrontends	ModuleFederationV1 + тесты	4-8ч
Dynamic imports	Обнови до latest Rspack	30мин
Storybook	RsdoctorPlugin для анализа	Инстант

Loaders: Самописные - редкость, но правь на SWC-based.
CI/CD: Параллельный запуск с Webpack для rollback.
Мониторинг: RsdoctorRspackPlugin визуализирует бандл - must-have.

Метрики ускорения: цифры не врут

Реальные кейсы показывают: Phase 1 (чистая миграция) - 300с -> 230с, Phase 2 (SWC) - до 140с, Phase 3 (minifier) - 80с. В Next.js с SSR это критично - серверные рендеры летают, клиентский гидратация мгновенная. Storybook с 2.5мин до 33с - QA в восторге.

Плюс низкий memory footprint: меньше подов в K8s, дешевле CI. Для больших проектов (550+ компонентов) - 8x speedup на Mac. Это подводит к деталям конфига.

// rspack.config.js для Next.js
module.exports = {
  module: {
    rules: [{ test: /\.(ts|js)x?$/, use: 'swc_loader' }]
  },
  plugins: [new rspack.HtmlWebpackPlugin()],
  optimization: { minimizer: [new rspack.SwcMinimizerPlugin()] }
};

SWC integration: Замена babel - 40% gain.
HMR tuning: Встроенный - 20x быстрее.

Rspack в 2026: что дальше для Next.js

Rspack достиг 1.0 - экосистема зрелая, плагины на Rust, полная совместимость. Осталось дошлифовать edge-кейсы с AI-генерируемым кодом и WebAssembly в Next.js. Стоит подумать о гибриде с Turbopack для hybrid рендера.

Команды уже на full Rspack в проде - стабильность топ, скорость огонь. Дальше - интеграция с новыми Next.js фичами, типа partial prerendering, без боли от медленных билдов.