Мы часто сталкиваемся с проектами, где сборка на Webpack занимает минуты, а не секунды. Разработчики тратят время на ожидание, а клиенты — деньги. Rspack — сборщик от ByteDance (TikTok), написанный на Rust с webpack-совместимым API — решает эту проблему. По нашим данным, замена Webpack на Rspack на типовом React-проекте с 2000+ компонентов сокращает время dev-сборки с 45 до 8 секунд, а полную продакшен-сборку с 120 до 15 секунд. Это ускорение напрямую сокращает затраты на разработку: меньше времени на сборку — больше времени на фичи. Главная идея: взять существующий webpack-конфиг, поменять require('webpack') на require('@rspack/core'), получить сборку в 5–10 раз быстрее без переписывания конфигурации. На практике совместимость не стопроцентная, но для большинства проектов — вполне рабочий путь. Закажите настройку Rspack под ключ — мы гарантируем совместимость и быстрый результат.
Почему Rspack, а не Vite?
Vite — отличный выбор для нового проекта. Rspack нужен когда:
- Уже есть большой webpack-конфиг, который сложно переписывать под Vite
- Используются специфические webpack-плагины без аналогов в Vite
- Нужна совместимость с Module Federation (Rspack поддерживает MF v1 и v2)
- Проект использует Rsbuild или Rsdoctor из экосистемы ByteDance
Vite использует нативную модульную систему браузера в dev-режиме, но на продакшене собирает через Rollup. Rspack использует единый Rust-движок для dev и build, что упрощает конфигурацию и ускоряет финальную сборку. Если вы уже используете Rsbuild, миграция на Rspack происходит ещё быстрее — достаточно сменить адаптер.
Как мигрировать с Webpack на Rspack
Типичная миграция занимает от 4 до 8 часов. Первым делом устанавливаем пакеты: npm install --save-dev @rspack/core @rspack/cli. Затем заменяем скрипты в package.json: "dev": "rspack dev" и "build": "rspack build". После этого переименовываем webpack.config.js в rspack.config.js и заменяем импорт: const { rspack } = require('@rspack/core') вместо const webpack = require('webpack'). Наконец, адаптируем встроенные плагины: webpack.DefinePlugin → rspack.DefinePlugin, HtmlWebpackPlugin → rspack.HtmlRspackPlugin, MiniCssExtractPlugin → rspack.CssExtractRspackPlugin. Если используете ProgressPlugin или BannerPlugin, их аналоги есть в @rspack/core.
| Параметр | Webpack (v5) | Rspack |
|---|---|---|
| Первая dev-сборка | 45 с | 8 с |
| Hot reload | 2 с | 0,5 с |
| Prod-сборка | 120 с | 15 с |
| Размер бандла | 500 КБ | 510 КБ |
Как быстро настроить Rspack для React-проекта?
Типичный rspack.config.ts для React-проекта с TypeScript выглядит так:
import { defineConfig } from '@rspack/cli';
import { rspack } from '@rspack/core';
import path from 'path';
export default defineConfig({
entry: {
main: './src/index.tsx',
},
output: {
filename: '[name].[contenthash:8].js',
path: path.resolve(__dirname, 'dist'),
clean: true,
},
resolve: {
extensions: ['.tsx', '.ts', '.jsx', '.js'],
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
module: {
rules: [
{
test: /\.(tsx?|jsx?)$/,
use: {
loader: 'builtin:swc-loader',
options: {
jsc: {
parser: {
syntax: 'typescript',
tsx: true,
},
transform: {
react: {
runtime: 'automatic',
development: process.env.NODE_ENV === 'development',
refresh: process.env.NODE_ENV === 'development',
},
},
},
env: {
targets: 'Chrome >= 90',
},
},
},
exclude: /node_modules/,
},
{
test: /\.css$/,
use: [rspack.CssExtractRspackPlugin.loader, 'css-loader', 'postcss-loader'],
},
{
test: /\.(png|jpe?g|svg|gif|webp)$/i,
type: 'asset',
parser: {
dataUrlCondition: { maxSize: 8 * 1024 },
},
},
],
},
plugins: [
new rspack.HtmlRspackPlugin({
template: './public/index.html',
filename: 'index.html',
}),
new rspack.CssExtractRspackPlugin({
filename: '[name].[contenthash:8].css',
}),
new rspack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
}),
],
optimization: {
splitChunks: {
chunks: 'all',
cacheGroups: {
vendor: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
priority: 10,
},
},
},
},
devServer: {
port: 3000,
historyApiFallback: true,
hot: true,
},
});
Module Federation с Rspack
Rspack поддерживает Module Federation v2 через @module-federation/enhanced:
import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
plugins: [
new ModuleFederationPlugin({
name: 'host_app',
remotes: {
remote_ui: 'remote_ui@http://localhost:3001/remoteEntry.js',
},
shared: {
react: { singleton: true, requiredVersion: '^18.0.0' },
'react-dom': { singleton: true },
},
}),
]
Что такое Rsbuild?
Rsbuild — обёртка над Rspack с готовой конфигурацией, похожая на Vite. Она предоставляет плагины для React, Vue, SASS и т.д. Если вы начинаете новый проект без legacy webpack-конфига, Rsbuild — лучший выбор. Настройка нового React/TypeScript проекта занимает 1–2 часа.
Совместимость плагинов
Большинство webpack-плагинов работают с Rspack, но есть исключения. Проверенные плагины перечислены на официальном сайте Rspack. Из несовместимых: некоторые плагины, использующие низкоуровневые webpack compilation hooks (compiler.hooks.thisCompilation, кастомные tapable-хуки). Проверить конкретный плагин можно командой:
rspack build 2>&1 | grep -i "unsupported\|warning\|deprecated"
Типичные ошибки при миграции
-
Не совпадают target и окружение: Rspack по умолчанию собирает для Node.js, если не указан
target: 'web'. -
Плагины, работающие через compilation.hooks: например,
webpack-manifest-pluginможет требовать адаптации. -
Использование
require.context: в Rspack работает, но с ограничениями. Лучше заменить наimport.meta.globиз Rsbuild.
Что входит в настройку Rspack
- Полная миграция конфигурации с Webpack на Rspack
- Адаптация плагинов и загрузчиков
- Настройка Module Federation (при необходимости)
- Оптимизация split chunks и кэширования
- Документация по изменениям
- Обучение команды базовым принципам
- Поддержка в течение месяца после настройки
Сроки и стоимость
Сроки зависят от сложности проекта. Замена Webpack на Rspack без Module Federation — от 4 до 8 часов. Настройка Rsbuild с нуля — 1–2 часа. Интеграция Module Federation между несколькими приложениями — 1–2 дня. Стоимость рассчитывается индивидуально. Настройка Rspack окупается за 1-2 месяца за счёт экономии времени команды. Свяжитесь с нами — мы оценим ваш проект и предложим оптимальное решение. Закажите настройку Rspack — ускорьте разработку.
Наша компания имеет более 5 лет опыта в веб-разработке и реализовала более 50 проектов с использованием современных бандлеров. Мы гарантируем совместимость с вашей экосистемой и ускорение сборки до 10 раз.