Skip to main content

Rspack vs Webpack: Drop-In Replacement Performance Deep Dive 2026

·PkgPulse Team

Mews migrated their webpack monorepo to Rspack and cut startup time from 3 minutes to 10 seconds. ByteDance (Rspack's creator) reports 5-10x build improvements across internal projects. Rspack 1.0 benchmarks show 23x faster production builds than webpack 5 with Babel. These aren't demo projects — they're production systems with years of webpack history, and the drop-in replacement actually works.

TL;DR

Rspack is production-ready as of v1.0 (October 2024). For webpack-heavy projects (monorepos, enterprise apps, legacy codebases that can't migrate to Vite), Rspack is the highest-impact improvement you can make in 2026. Migration from webpack is 1-2 days for most projects. The webpack ecosystem compatibility is approximately 85%, covering the most commonly used loaders and plugins.

Key Takeaways

  • Rspack 1.0 production builds: 23x faster than webpack 5 + Babel on equivalent benchmarks
  • Real-world results: Mews -80% build time, ByteDance 5-10x, various teams 70%+ reductions
  • 85%+ webpack plugin compatibility — most popular plugins work out of the box
  • All webpack loaders (babel-loader, css-loader, ts-loader, file-loader) work unchanged
  • Rspack uses webpack's configuration schema — minimal config changes needed
  • @rspack/core is a drop-in for webpack, rspack-cli is a drop-in for webpack-cli
  • Used in production by ByteDance, Microsoft, Amazon, Discord, Shopify

What Is Rspack?

Rspack is a webpack-compatible JavaScript bundler written in Rust, built by the ByteDance (TikTok's parent company) frontend infrastructure team. It aims to be a drop-in replacement for webpack — same configuration format, same plugin/loader API, dramatically faster.

Unlike Vite or Farm (which require migrating your mental model), Rspack lets you keep your webpack configuration and just replace the binary.

Installation

# Remove webpack
npm uninstall webpack webpack-cli

# Install Rspack
npm install -D @rspack/core @rspack/cli

# Update package.json scripts
# Before:
"build": "webpack --config webpack.config.js",
"dev": "webpack serve --config webpack.config.js",

# After:
"build": "rspack build",
"dev": "rspack serve",

Configuration Compatibility

Your webpack config often works with minimal changes:

// webpack.config.js → rspack.config.js
// This is often the ONLY change needed:
- const webpack = require('webpack');
+ const rspack = require('@rspack/core');

module.exports = {
  entry: './src/index.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'babel-loader', // Works unchanged
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader', 'postcss-loader'], // Works unchanged
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        type: 'asset/resource', // webpack 5 asset modules work in Rspack
      },
    ],
  },
  plugins: [
    new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
    new rspack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }),
  ],
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
};

Built-in TypeScript and React Support

Rspack's biggest DX improvement over webpack: TypeScript and JSX/TSX compilation are built-in (via SWC), no Babel or ts-loader required:

// rspack.config.js — No babel-loader needed!
module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: {
          loader: 'builtin:swc-loader', // Built-in SWC, no install needed
          options: {
            jsc: {
              parser: { syntax: 'typescript', tsx: true },
              transform: { react: { runtime: 'automatic' } },
            },
          },
        },
      },
    ],
  },
};

SWC is 20-70x faster than Babel for transpilation, which is a significant portion of webpack's build time.

Performance Benchmarks

Official Benchmark (1,000 React components)

BundlerProduction Build
Rspack 1.0282ms
Vite (Rollup)1,780ms
TurbopackN/A (dev only)
webpack 5 + SWC832ms
webpack 5 + Babel6,523ms

Real-World Migration Results

Mews (hospitality SaaS monorepo):

  • Before: Cold start 3 minutes, production build 8+ minutes
  • After: Cold start 10 seconds, production build 90 seconds
  • Result: 80% build time reduction

ByteDance internal projects:

  • 5-10x improvement across various projects
  • Key factor: removing Babel entirely, using built-in SWC

Medium-sized React app (150K LOC, various teams):

  • Before: 45-60 second dev startup, 8-minute production build
  • After: 8-12 second dev startup, 90-second production build
  • Result: ~70% improvement

Why Is Rspack Faster?

  1. Rust core: No JavaScript overhead for core bundling operations
  2. Parallelism: Multi-threaded by default (webpack is single-threaded JavaScript)
  3. Built-in SWC: Replaces Babel with a 20-70x faster transpiler
  4. Incremental compilation: Only rebuilds changed modules and their dependents
  5. Efficient algorithms: LLVM-optimized graph traversal and tree-shaking

Plugin Compatibility

Plugins That Work Out of the Box

PluginNotes
HtmlWebpackPluginRspack has HtmlRspackPlugin (built-in, faster)
MiniCssExtractPluginUse CssExtractRspackPlugin (built-in)
DefinePluginUse rspack.DefinePlugin
CopyPluginSupported
BannerPluginSupported
webpack-bundle-analyzerWorks with Rspack
fork-ts-checker-webpack-pluginWorks
eslint-webpack-pluginWorks

Plugins That Need Alternatives

webpack PluginRspack Alternative
HtmlWebpackPluginrspack.HtmlRspackPlugin (built-in)
MiniCssExtractPluginrspack.CssExtractRspackPlugin (built-in)
terser-webpack-pluginBuilt-in (SWC minifier)
speed-measure-webpack-pluginNot needed (Rspack has built-in profiling)

Loaders That Work

All webpack loaders that don't require webpack internals work unchanged:

# These all work:
babel-loader     # Or replace with builtin:swc-loader
css-loader
style-loader
postcss-loader
sass-loader
less-loader
file-loader
url-loader
ts-loader        # Or replace with builtin:swc-loader
vue-loader       # Works (Rspack has Vue support)

Rsbuild: The High-Level Abstraction

ByteDance also released Rsbuild — a higher-level build tool on top of Rspack, similar to how Vite is a build tool on top of Rollup:

npm install -D @rsbuild/core
// rsbuild.config.ts
import { defineConfig } from '@rsbuild/core';
import { pluginReact } from '@rsbuild/plugin-react';
import { pluginSass } from '@rsbuild/plugin-sass';

export default defineConfig({
  plugins: [pluginReact(), pluginSass()],
  html: {
    template: './src/index.html',
  },
  source: {
    entry: { index: './src/index.tsx' },
  },
  output: {
    distPath: { root: 'dist' },
  },
});

Rsbuild provides zero-config defaults similar to Create React App or Vite's defaults, but with Rspack's performance.

Migration Guide

Step 1: Install Rspack

npm uninstall webpack webpack-cli html-webpack-plugin mini-css-extract-plugin terser-webpack-plugin
npm install -D @rspack/core @rspack/cli

Step 2: Rename Config

cp webpack.config.js rspack.config.js

Step 3: Update Imports

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

// With:
const rspack = require('@rspack/core');
// HtmlRspackPlugin and CssExtractRspackPlugin are built-in

Step 4: Update Plugins

plugins: [
  // Replace:
  new HtmlWebpackPlugin({ template: './src/index.html' }),
  new MiniCssExtractPlugin({ filename: '[name].[contenthash].css' }),

  // With:
  new rspack.HtmlRspackPlugin({ template: './src/index.html' }),
  new rspack.CssExtractRspackPlugin({ filename: '[name].[contenthash].css' }),
],
// Replace babel-loader with built-in SWC:
{
  test: /\.[jt]sx?$/,
  use: {
    loader: 'builtin:swc-loader',
    options: {
      jsc: {
        parser: { syntax: 'typescript', tsx: true },
        transform: { react: { runtime: 'automatic' } },
      },
    },
  },
}

This step alone often yields another 30-50% build time reduction.

Step 6: Update package.json Scripts

{
  "scripts": {
    "dev": "rspack serve",
    "build": "rspack build",
    "build:analyze": "RSPACK_BUNDLE_ANALYZER=true rspack build"
  }
}

When Rspack Makes Sense

Choose Rspack if:

  • You have a large webpack codebase that can't realistically migrate to Vite
  • Build times are noticeably impacting developer velocity
  • You're in a monorepo with webpack at the core
  • Your project relies on webpack-specific plugins that don't have Vite equivalents
  • You want 80% of the migration effort at 50% of the migration risk

Migrate to Vite instead if:

  • You're starting a new project
  • Your webpack config is relatively simple
  • You want the larger ecosystem (more plugins, better docs)
  • Framework integration matters (SvelteKit, Astro, Nuxt use Vite)

Stick with webpack if:

  • Your project is stable, builds are acceptable, and migration risk outweighs benefits
  • You rely on webpack plugins with no Rspack equivalents
  • You're in a regulated environment where change control is significant overhead

The Verdict

Rspack 1.0 is a genuine production-ready webpack replacement in 2026. The compatibility story is better than expected — most webpack projects can migrate in 1-2 days with significant performance gains. The 80% build time reductions reported by multiple companies are real, not cherry-picked benchmarks.

If you have a webpack codebase and build speed is a pain point, Rspack is the lowest-risk, highest-reward optimization available.

Compare rspack vs webpack download trends on PkgPulse.

Comments

Stay Updated

Get the latest package insights, npm trends, and tooling tips delivered to your inbox.