Настройка 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 раз.