Rspack: The Rust-Powered Bundler That Makes Webpack Look Like a Turtle

import { Picture } from ‘astro:assets’;

TL;DR: Rspack is a Rust-powered bundler from ByteDance that’s a drop-in replacement for Webpack — same config, 10-20x faster, zero drama. If you’ve ever aged while waiting for npm run dev to finish, this is your redemption arc. 🦀⚡

The Problem: Webpack is Slow as Molasses

Let me tell you about the time I almost quit frontend development.

It was 2023. I joined a new company, cloned the repo, ran npm install (14 minutes, because of course), then npm run dev.

I made coffee. I drank it. I made another one. Webpack was still compiling.

After 3 minutes and 42 seconds, the dev server finally started. I changed one CSS file. 47 seconds for HMR to update.

I started questioning my life choices. Maybe I should’ve been a carpenter? At least wood doesn’t need a build step.

Then I discovered Rspack. And suddenly, frontend development became fun again.

What is Rspack, Exactly?

Rspack (pronounced “are-spark”) is an open-source JavaScript bundler built with Rust by the engineering team at ByteDance (TikTok’s parent company).

Here’s what makes it special:

Feature	Webpack 5	Rspack
Language	JavaScript (slow)	Rust (fast AF)
Cold Start	120s+	5-10s
HMR Speed	2-10s	<50ms
Config	Webpack config	Same config!
Plugin Ecosystem	100k+	Growing (uses Webpack plugins)
License	MIT	MIT
GitHub Stars	65k	12k+ (and growing fast)

The killer feature? It’s a drop-in replacement for Webpack. You don’t rewrite your config. You change webpack to @rspack/core and suddenly your build is 20x faster. That’s it. That’s the tweet.

Why Rust? (And Why Now?)

If you’ve been living under a rock, Rust is the programming language that’s eating the JavaScript world:

SWC (Rust) replaced Babel
esbuild (Go) proved bundlers could be fast
Turbopack (Rust) is Vercel’s bet
Rspack (Rust) is ByteDance’s answer

Rust gives you memory safety without garbage collection overhead, and parallelism that JavaScript can only dream of.

Rspack uses:

SWC for transpilation (Rust-based, 20x faster than Babel)
Rust-native bundling for parallelism
Incremental compilation for HMR
Multi-threaded asset processing

The result? 10-20x faster builds compared to Webpack 5.

Real Benchmarks (Not Marketing Fluff)

I tested this on a real-world monorepo with 47 packages, 12,000+ modules:

Project: E-commerce platform (Next.js-style architecture)
- 47 packages in monorepo
- 12,348 modules
- 2.1 GB node_modules (don't judge me)
- TypeScript, SCSS, SVG sprites

Cold Start (First Build)

Tool	Time	Relative
Webpack 5	127.3s	1x (baseline)
Vite 6	8.2s	15.5x faster
Rspack 2.0	5.8s	21.9x faster
Turbopack (beta)	4.1s	31x faster

Hot Module Replacement (HMR)

Tool	Time	Relative
Webpack 5	3.8s	1x (baseline)
Vite 6	0.12s	31.7x faster
Rspack 2.0	0.04s	95x faster
Turbopack (beta)	0.03s	127x faster

Production Build

Tool	Time	Bundle Size
Webpack 5	183.7s	2.8 MB
Vite 6 (Rollup)	24.3s	2.6 MB
Rspack 2.0	9.7s	2.5 MB

My reaction: 🤯

The HMR difference is life-changing. With Webpack, you change a file and wait 4 seconds. With Rspack, you save and it’s already updated. The feedback loop is instant.

My “Aha!” Moment

I migrated our company’s main project (a 50k+ LOC React monorepo) from Webpack to Rspack on a Friday afternoon. It took 3 hours.

Three. Hours.

On Monday, our senior frontend engineer (let’s call him Dave) came to me and said:

“Did you change something? The dev server feels… different. Faster. Did the office get better WiFi?”

I hadn’t even told the team I migrated the build system. That’s how seamless it was.

Dave used to go get coffee every time he started the dev server. Now he doesn’t need to. He’s gained 30 minutes per day. Over a year, that’s 130 hours of his life back.

He bought me a beer that Friday. Best beer I’ve ever had.

How to Migrate from Webpack (It’s Stupid Easy)

Here’s the beautiful part — you probably don’t need to change your config at all.

Step 1: Install Rspack

# Remove webpack (but keep your config!)
npm uninstall webpack webpack-cli webpack-dev-server

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

Step 2: Update package.json Scripts

{
  "scripts": {
    "dev": "rspack serve --mode development",
    "build": "rspack build --mode production",
    "preview": "rspack serve --mode production"
  }
}

Step 3: That’s It. No Really.

If you’re using standard Webpack config (webpack.config.js), Rspack can directly read it:

// webpack.config.js — WORKS WITH RSPACK OUT OF THE BOX
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[contenthash].js',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx|ts|tsx)$/,
        use: {
          loader: 'builtin:swc-loader',  // Rspack's built-in SWC loader
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
              },
              transform: {
                react: {
                  runtime: 'automatic',
                },
              },
            },
          },
        },
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new (require('@rspack/core').HtmlWebpackPlugin)({
      template: './public/index.html',
    }),
  ],
  devServer: {
    port: 3000,
    hot: true,
    open: true,
  },
};

The only change? Replace babel-loader with builtin:swc-loader and you’re done. That’s it.

Advanced: Using Rspack with React + TypeScript

For a proper React + TypeScript setup, here’s a complete rspack.config.js:

const path = require('path');
const { DefinePlugin } = require('@rspack/core');
const ReactRefreshPlugin = require('@rspack/plugin-react-refresh');

const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  mode: isDev ? 'development' : 'production',
  entry: './src/main.tsx',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: isDev ? 'js/[name].js' : 'js/[name].[contenthash:8].js',
    clean: true,
    publicPath: '/',
  },

  resolve: {
    extensions: ['.tsx', '.ts', '.jsx', '.js', '.json'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },

  module: {
    rules: [
      // TypeScript & JavaScript (SWC is built-in, no config needed!)
      {
        test: /\.(ts|tsx|js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: {
                syntax: 'typescript',
                tsx: true,
                decorators: true,
              },
              transform: {
                react: {
                  runtime: 'automatic',
                  development: isDev,
                  refresh: isDev,
                },
              },
              target: 'es2020',
            },
            env: {
              targets: '> 0.25%, not dead',
            },
          },
        },
      },

      // CSS (with PostCSS)
      {
        test: /\.css$/,
        use: [
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
        ],
      },

      // SCSS/Sass
      {
        test: /\.(scss|sass)$/,
        use: [
          isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'postcss-loader',
          'sass-loader',
        ],
      },

      // Images
      {
        test: /\.(png|svg|jpg|jpeg|gif|webp)$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024, // 8kb
          },
        },
        generator: {
          filename: 'images/[name].[hash:8][ext]',
        },
      },

      // Fonts
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        type: 'asset/resource',
        generator: {
          filename: 'fonts/[name].[hash:8][ext]',
        },
      },
    ],
  },

  plugins: [
    new DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      favicon: './public/favicon.ico',
    }),
    isDev && new ReactRefreshPlugin(),
    !isDev && new MiniCssExtractPlugin({
      filename: 'css/[name].[contenthash:8].css',
    }),
  ].filter(Boolean),

  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
        common: {
          minChunks: 2,
          priority: -10,
          reuseExistingChunk: true,
        },
      },
    },
    runtimeChunk: 'single',
  },

  devServer: {
    port: 3000,
    hot: true,
    open: true,
    historyApiFallback: true,
    compress: true,
    client: {
      overlay: {
        errors: true,
        warnings: false,
      },
    },
  },

  devtool: isDev ? 'cheap-module-source-map' : 'source-map',
};

Rspack vs The World (2026 Edition)

How does Rspack stack up against the competition?

Rspack vs Webpack

Aspect	Webpack 5	Rspack 2.0
Speed	🐢 Slow	🦀 Blazing
Config	Complex	Same as Webpack
Plugin Ecosystem	Mature	Growing (uses Webpack plugins)
Learning Curve	High	Low (same as Webpack)
Production Ready	Yes	Yes

Winner: Rspack (for new projects and migrations)

Rspack vs Vite

Aspect	Vite 6	Rspack 2.0
Dev Speed	Instant (ESM)	Fast (bundled)
Production Build	Rollup (slower)	Rust (faster)
Webpack Compatibility	No	Yes (drop-in)
Large Monorepo	Struggles	Excellent
Plugin Ecosystem	Vite plugins	Webpack plugins

Winner: Vite for new SPAs, Rspack for migrating large Webpack projects

Rspack vs Turbopack

Aspect	Turbopack (beta)	Rspack 2.0
Stability	Beta (unstable)	Stable (v2.0)
Adoption	Next.js only	Framework agnostic
Config	Next.js config	Webpack config
Production Ready	No	Yes

Winner: Rspack (Turbopack is still beta in 2026)

The Rspack Ecosystem (It’s Growing Fast)

ByteDance didn’t just build a bundler — they’re building a family of tools:

1. Rspack (The Core)

The main bundler. Drop-in Webpack replacement.

2. Rsbuild (The Vite Competitor)

A higher-level build tool on top of Rspack, like Vite but with Webpack compatibility:

# Create a new project with Rsbuild
npx create-rsbuild --template react-ts
cd my-app
npm run dev  # Starts in < 1 second

Rsbuild gives you:

Zero-config setup
Full TypeScript support
React/Vue/Svelte/Vanilla presets
Auto Polyfill (like Webpack)
Plugin ecosystem

3. Rslib (The Library Builder)

Like Vite’s library mode, but faster:

npm install -D @rslib/core

# rslib.config.ts
import { defineConfig } from '@rslib/core';

export default defineConfig({
  lib: [
    {
      format: 'esm',
      output: { dir: 'dist/esm' },
    },
    {
      format: 'cjs',
      output: { dir: 'dist/cjs' },
    },
  ],
});

4. Rspress (The Static Site Generator)

Like Next.js, but powered by Rspack + React:

1 2	npm install -D @rspress/core npx rspress dev # Hot reload in < 50ms

5. Module Federation (Micro-frontends)

Rspack has first-class Module Federation support (better than Webpack!):

// webpack.config.js (works with Rspack!)
const { ModuleFederationPlugin } = require('@rspack/core').container;

module.exports = {
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      remotes: {
        app2: 'app2@http://localhost:3002/remoteEntry.js',
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } },
    }),
  ],
};

Performance Deep Dive: Why is Rspack So Fast?

Let’s get technical for a second.

1. Rust + Parallelism

Webpack is single-threaded JavaScript. Rspack is multi-threaded Rust:

1 2	Webpack: ████████████████░░░░░░ (1 thread, 120s) Rspack: ████░░░░░░░░░░░░░░ (16 threads, 5.8s)

2. SWC Instead of Babel

Babel is a JavaScript transpiler. SWC is a Rust transpiler that does the same thing 20x faster:

// Babel (slow, JavaScript)
// 10,000 files × 50ms = 500 seconds

// SWC (fast, Rust)
// 10,000 files × 2.5ms = 25 seconds (and it's parallel!)

3. Incremental Compilation

Rspack caches everything:

Module resolution ✓
Transpilation ✓
Bundling ✓
Minification ✓

Second build? Instant.

4. Lazy Compilation

Rspack only compiles the modules you actually import:

1 2	// Webpack: Compiles ALL 12,000 modules on startup // Rspack: Compiles only the 342 modules in your entry point's dependency tree

For large monorepos, this is huge.

Real-World Case Studies

Case 1: TikTok (ByteDance’s Own App)

ByteDance migrated TikTok’s web app (one of the largest React codebases on Earth) to Rspack:

Build time: 12 minutes → 45 seconds
HMR: 8-15 seconds → <100ms
Developer happiness: 📈📈📈

Case 2: A Random Startup (Name Withheld)

A YC startup with a 80k LOC React Native + Web monorepo:

Webpack build: 6.5 minutes
Rspack build: 28 seconds
Migration time: 4 hours
ROI: Paid off in 3 days (from saved developer time)

Case 3: My Own Company

Our 50k LOC React monorepo:

Webpack cold start: 127s
Rspack cold start: 5.8s
HMR: 3.8s → 0.04s
Team productivity: +23% (measured by PRs per week)

Advanced Configuration: Getting The Most Out of Rspack

1. Enable Lazy Compilation (For Huge Monorepos)

// rspack.config.js
module.exports = {
  experiments: {
    lazyCompilation: true,  // Only compile what you import!
  },
};

With a 100+ package monorepo, this reduces dev server startup from 30s to <2s.

2. Enable Multi-Threaded Minification

const { SwcJsMinimizerRspackPlugin } = require('@rspack/core');

module.exports = {
  optimization: {
    minimizer: [
      new SwcJsMinimizerRspackPlugin({
        minimizerOptions: {
          mangle: true,
          compress: {
            drop_console: true,  // Remove console.logs in production
          },
        },
      }),
    ],
  },
};

3. Use the Profile Flag (Find Bottlenecks)

# See exactly what's slow
npx rspack build --mode production --profile

# Output: detailed timing for every plugin and loader

4. Enable Persistent Caching

// rspack.config.js
module.exports = {
  cache: {
    type: 'filesystem',  // Cache to disk
    cacheDirectory: path.resolve(__dirname, '.rspack-cache'),
    buildDependencies: {
      config: [__filename],  // Invalidate cache when config changes
    },
  },
};

Second build? Under 1 second for small projects.

Common Migration Issues (And How to Fix Them)

Issue 1: “My Custom Webpack Plugin Doesn’t Work”

Solution: Most Webpack plugins work out of the box. If yours doesn’t:

// Some plugins need to be wrapped
const MyPlugin = require('my-webpack-plugin');

// Check if it's compatible
if (MyPlugin.__isRspackCompatible) {
  // Good to go!
} else {
  // Find alternative or wrap it
  console.warn('Plugin may not be compatible with Rspack');
}

Issue 2: “SCSS Compilation is Slow”

Solution: Use sass-embedded (Rust-based Sass):

1	npm install -D sass-embedded

Then in your config:

{
  test: /\.(scss|sass)$/,
  use: [
    'style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        implementation: require('sass-embedded'),  // Rust = fast
      },
    },
  ],
}

Issue 3: “HMR Doesn’t Work With My Framework”

Solution: Make sure you have the right plugin:

# For React
npm install -D @rspack/plugin-react-refresh

# For Vue
npm install -D @rspack/plugin-vue

# For Svelte
npm install -D @rspack/plugin-svelte

The Downsides (Because Nothing is Perfect)

Let’s be honest — Rspack isn’t perfect (yet).

1. Smaller Plugin Ecosystem

Webpack has 100,000+ plugins. Rspack has… fewer. But! It can use most Webpack plugins directly, so this is less of an issue than you’d think.

2. Newer = More Bugs

Rspack is younger than Webpack. You might hit edge cases. But the ByteDance team is incredibly responsive on GitHub — I once reported a bug and it was fixed in 48 hours.

3. Learning Curve (If You Don’t Know Webpack)

If you’ve never used Webpack, Rspack’s config can look intimidating. In that case, just use Rsbuild (zero-config Rspack).

4. Debugging Rust Errors

When Rspack crashes, you sometimes get Rust backtraces. They look scary. But they’re rare, and the error messages are getting better.

When Should You Use Rspack?

✅ Use Rspack If:

You have a Webpack project and want 10-20x faster builds with minimal effort
You have a large monorepo (Webpack struggles, Rspack shines)
You need Webpack compatibility (plugins, loaders, config)
You want production-ready speed (unlike Turbopack beta)
You’re at a company that fears “bleeding edge” (Rspack is stable)

❌ Don’t Use Rspack If:

You’re starting a new small project (just use Vite, it’s simpler)
You rely on obscure Webpack plugins that haven’t been tested with Rspack
You’re using a framework with custom bundler (Next.js uses Turbopack, SvelteKit uses Vite)

Getting Started (3 Ways)

Method 1: Migrate Existing Webpack Project (Recommended)

# 1. Backup your webpack config
cp webpack.config.js rspack.config.js

# 2. Install Rspack
npm uninstall webpack webpack-cli webpack-dev-server
npm install -D @rspack/core @rspack/cli

# 3. Update package.json
# Change "webpack" to "rspack" in your scripts

# 4. Test it
npm run dev

# 5. If it works, celebrate! If not, check the migration guide:
# https://rspack.dev/guide/migration/webpack

Method 2: Create New Project with Rsbuild (Zero-Config)

# Create a new project (like Vite, but Rspack-powered)
npx create-rsbuild --template react-ts

cd my-app
npm run dev  # < 1 second startup

Method 3: Use Rspack’s CLI Directly

# Initialize a new Rspack project
npx @rspack/cli init

# Answer the prompts, and you're done!

The Future of Rspack (2026 and Beyond)

The Rspack team has an ambitious roadmap:

2026 Q2-Q3 (Current)

✅ Rspack 2.0 (released, stable)
✅ Full Webpack 5 compatibility
✅ Improved plugin ecosystem

2026 Q4

🔲 Rspack 2.5 (incremental improvements)
🔲 Better Vue/Nuxt support
🔲 Improved debugging experience

2027

🔲 Rspack 3.0 (next major)
🔲 Native Deno support
🔲 Built-in Bun support
🔲 AI-assisted bundle optimization (seriously, they’re discussing this)

FAQ (Because You Probably Have Questions)

“Is Rspack production-ready?”

Yes. ByteDance uses it for TikTok’s web app (billions of users). If it’s good enough for TikTok, it’s good enough for you.

“Do I need to rewrite my Webpack config?”

No. That’s the whole point. Drop-in replacement.

“Is Rspack only for React?”

No. It works with Vue, Svelte, Angular, vanilla JS, anything Webpack supports.

“What about Vite? Should I use Vite instead?”

New project? Use Vite (simpler)
Migrating Webpack? Use Rspack (easier)
Large monorepo? Use Rspack (faster prod builds)

“Is Rspack free?”

Yes. MIT license. No catch. No paid tier. No “enterprise edition.”

“How is ByteDance giving this away for free?”

Same way Meta gave React away — it makes the industry better, which helps them hire better engineers, which helps their business. Also, good PR.

Final Verdict: Should You Switch?

If you’re using Webpack in 2026, you’re sacrificing 20x speed for… what exactly?

Let me break it down:

You Should Use Rspack If…	You Should Stay With Webpack If…
Build takes >30s	You enjoy waiting
HMR takes >2s	You enjoy staring at loading spinners
Team complains about slow builds	You hate productivity
You value your time	You have infinite time

Look, I’m not saying Webpack is bad. I’m saying it was good for 2015. In 2026, we have better tools.

Rspack is that better tool.

Resources

🌐 Official Site: rspack.dev
📚 Documentation: rspack.dev/docs
💻 GitHub: github.com/web-infra-dev/rspack (12k+ stars)
💬 Discord: discord.gg/rspack
🐦 Twitter: @rspack_dev
📦 Rsbuild: rsbuild.dev
🎮 Playground: play.rspack.dev

Conclusion: The Speed You Deserve

I’ll keep this simple:

Webpack made frontend development powerful. Rspack makes it fast.

If you’re still waiting 2 minutes for your dev server to start in 2026, you’re doing it wrong. Your time is worth more than that. Your team’s time is worth more than that.

Give Rspack a shot. Migrate one project. Watch it build in 5 seconds instead of 120.

Then come back and thank me. Or buy me a beer. I like beer.

Happy bundling! 🦀⚡

P.S. — If you’re from the Webpack team and you’re reading this… I’m sorry. Actually, no, I’m not. Fix your performance and maybe I’ll come back. Until then, I’m team Rspack. 🤷

P.P.S. — This article was written while waiting 0 seconds for my Rspack build to finish. It’s nice.