Ми часто стикаємося з проектами, де збірка на 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 разів.