Налаштування Rspack: швидка міграція з Webpack та оптимізація збірки

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

Як швидко налаштувати 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 разів.