Rspack vs Webpack: Drop-In Replacement Performance 2026

TL;DR

Rspack 1.x is production-stable and genuinely 5-10x faster than Webpack for most projects. If you have an existing Webpack codebase you can't migrate to Vite (complex loaders, Module Federation, custom plugins), Rspack is the fastest path to faster builds. ByteDance runs it in production on TikTok's frontend. The catch: not 100% Webpack-compatible (most things work, some edge cases don't), and some Webpack plugins need Rspack-specific versions. For new projects: just use Vite. For stuck-on-Webpack projects: Rspack migration is worth it.

Key Takeaways

• Rspack: ~1.2M downloads/week, Rust-powered, written by ByteDance, Webpack-compatible API
• Webpack 5: ~20M downloads/week, de-facto standard, massive ecosystem, slow
• Speed: Rspack 5-10x faster cold builds, 5x faster HMR
• Compatibility: ~90-95% Webpack compatible (most loaders, most plugins)
• Breaking points: Some Webpack plugins use internal APIs not in Rspack
• Module Federation 2.0: Rspack ships it; Webpack has Module Federation 1.x

---

Downloads

Package	Weekly Downloads	Trend
webpack	~20M	↓ Slowly declining
@rspack/core	~1.2M	↑ Fast growing
vite	~16M	↑ Growing

---

Rspack Configuration

The key selling point: your existing webpack.config.js is nearly identical in Rspack.

// webpack.config.js (existing):
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  entry: './src/index.tsx',
  output: { path: path.resolve(__dirname, 'dist') },
  module: {
    rules: [
      { test: /\.tsx?$/, use: 'ts-loader' },
      { test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader'] },
    ],
  },
  plugins: [new HtmlWebpackPlugin(), new MiniCssExtractPlugin()],
};

// rspack.config.js (near-identical — just different import):
const { defineConfig } = require('@rspack/cli');
const rspack = require('@rspack/core');
const path = require('path');

module.exports = defineConfig({
  entry: './src/index.tsx',
  output: { path: path.resolve(__dirname, 'dist') },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        // Rspack built-in TypeScript — no ts-loader needed:
        type: 'typescript',
      },
      {
        test: /\.css$/,
        // Rspack built-in CSS — no css-loader needed:
        type: 'css',
        use: [rspack.CssExtractRspackPlugin.loader],
      },
    ],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({ template: './index.html' }),
    new rspack.CssExtractRspackPlugin(),
  ],
});

Rspack has built-in TypeScript, CSS, JSON, and asset handling — no separate loaders needed.

Rspack Built-In Features (No Loader Required)

module.exports = {
  module: {
    rules: [
      // TypeScript (replaces ts-loader, babel-loader with @babel/preset-typescript):
      { test: /\.(ts|tsx)$/, type: 'typescript' },
      
      // CSS Modules (replaces css-modules-typescript-loader):
      { test: /\.module\.css$/, type: 'css/module' },
      
      // Assets (replaces url-loader, file-loader):
      { test: /\.(png|jpg|gif|svg)$/, type: 'asset/resource' },
      { test: /\.(woff|woff2|eot|ttf|otf)$/, type: 'asset/resource' },
      
      // JSON (already built-in, no loader):
      // { test: /\.json$/ }  ← not needed
    ],
  },
};

---

Performance Benchmarks

Large React project (3000 modules, TypeScript, CSS Modules):

Cold build:
  Webpack 5 (ts-loader):     185s
  Webpack 5 (babel-loader):  95s  
  Rspack 1.x:                18s   ← ~5-10x faster

Incremental rebuild (single file change):
  Webpack 5:   8.2s
  Rspack 1.x:  1.3s  ← 6x faster

HMR (hot module replacement):
  Webpack 5:   ~3.5s (cold) → ~500ms (warm)
  Rspack 1.x:  ~800ms (cold) → ~80ms (warm)

Memory usage:
  Webpack 5:   ~2.8GB peak for 3000 modules
  Rspack 1.x:  ~800MB peak

---

Migration Guide

# 1. Install Rspack (keeps webpack for reference):
npm install --save-dev @rspack/core @rspack/cli

# 2. Add scripts:
# package.json:
{
  "scripts": {
    "dev": "rspack dev",
    "build": "rspack build",
    "build:webpack": "webpack"  // Keep as fallback
  }
}

# 3. Rename/copy config:
cp webpack.config.js rspack.config.js

# 4. Update imports:
# webpack → @rspack/core
# HtmlWebpackPlugin → rspack.HtmlRspackPlugin
# MiniCssExtractPlugin → rspack.CssExtractRspackPlugin

Compatibility Checklist

✅ Usually works:
  - Most webpack loaders (babel-loader, sass-loader, postcss-loader)
  - Most webpack plugins (copy-webpack-plugin, define-plugin)
  - webpack-dev-server (with rspack-dev-server replacement)
  - Code splitting, lazy imports, dynamic requires
  - Environment variables, DefinePlugin
  - Source maps

⚠️  Needs Rspack-specific version:
  - css-loader → use built-in or @rspack/plugin-css
  - HtmlWebpackPlugin → rspack.HtmlRspackPlugin (built-in)
  - MiniCssExtractPlugin → rspack.CssExtractRspackPlugin

❌ Not yet supported:
  - Some Webpack 5 internal API hooks used by complex plugins
  - Some Angular/Vue CLI specific plugins
  - Custom plugin APIs that tap internal Webpack compiler internals

---

Module Federation 2.0 (Rspack's Advantage)

// Rspack ships Module Federation 2.0 (Webpack only has 1.x):
const { ModuleFederationPlugin } = require('@module-federation/enhanced/rspack');

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'host',
      remotes: {
        remote: 'remote@http://localhost:3001/remoteEntry.js',
      },
      shared: {
        react: { singleton: true, requiredVersion: '^18.0.0' },
        'react-dom': { singleton: true, requiredVersion: '^18.0.0' },
      },
      // MF 2.0: Type safety between remotes:
      dts: true,
    }),
  ],
};

---

Decision Guide

Migrate to Rspack if:
  → Existing Webpack codebase you can't migrate to Vite
  → Build times > 30s are hurting developer productivity  
  → Using Module Federation (Rspack has MF 2.0)
  → Webpack-compatible API means low migration risk

Stick with Webpack if:
  → Complex plugins using Webpack internal APIs
  → Too risky to migrate before a deadline
  → Build times aren't a bottleneck

Use Vite instead if:
  → New project with no Webpack legacy
  → Not using Module Federation
  → React, Vue, Svelte, Vanilla TS app

Compare Rspack, Webpack, and Vite package health on PkgPulse.