Rspack — The Rust-Powered Bundler That Replaces Webpack with 20x Faster Builds

Posted on: 4/25/2026 11:13:10 PM

Webpack has dominated the JavaScript bundler landscape for nearly a decade. But as projects grow — hundreds of thousands of lines of code, thousands of modules — build times escalate from seconds to minutes, sometimes even tens of minutes. Developers wait impatiently, HMR lags, CI/CD pipelines crawl. Rspack was built to solve exactly this problem: keep the familiar Webpack ecosystem, but rewrite everything in Rust to achieve 20x faster builds.

What is Rspack?

Rspack (pronounced "R-S-Pack") is a high-performance JavaScript/TypeScript bundler developed by ByteDance (TikTok's parent company). It's written entirely in Rust and designed to be API-compatible with Webpack, allowing large projects to migrate with minimal config changes.

Unlike Vite (which uses ESBuild for dev and Rollup/Rolldown for production) or Turbopack (tied to Next.js only), Rspack is a general-purpose bundler that works with any framework: React, Vue, Svelte, Angular, or vanilla JavaScript.

Architecture: Why Rust Beats JavaScript

graph TB
    subgraph WP["Webpack (JavaScript)"]
        WP1["Parse modules
Single-threaded JS"] --> WP2["Build dependency graph
Single-threaded"]
        WP2 --> WP3["Babel transpile
Single-threaded"]
        WP3 --> WP4["Tree-shaking + Optimize
Single-threaded"]
        WP4 --> WP5["Generate bundles"]
    end
    subgraph RS["Rspack (Rust)"]
        RS1["Parse modules
Multi-threaded Rust"] --> RS2["Build dependency graph
Parallel processing"]
        RS2 --> RS3["SWC transpile
Native speed"]
        RS3 --> RS4["LLVM-optimized
tree-shaking"]
        RS4 --> RS5["Generate bundles"]
    end
    style WP fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style RS fill:#f8f9fa,stroke:#e94560,color:#2c3e50
    style WP1 fill:#fff,stroke:#e0e0e0,color:#2c3e50
    style WP2 fill:#fff,stroke:#e0e0e0,color:#2c3e50
    style WP3 fill:#fff,stroke:#e0e0e0,color:#2c3e50
    style WP4 fill:#fff,stroke:#e0e0e0,color:#2c3e50
    style WP5 fill:#fff,stroke:#e0e0e0,color:#2c3e50
    style RS1 fill:#e94560,stroke:#fff,color:#fff
    style RS2 fill:#e94560,stroke:#fff,color:#fff
    style RS3 fill:#e94560,stroke:#fff,color:#fff
    style RS4 fill:#e94560,stroke:#fff,color:#fff
    style RS5 fill:#e94560,stroke:#fff,color:#fff

There are 4 core reasons why Rspack outperforms Webpack by orders of magnitude:

1. Rust instead of JavaScript: Rust is a compiled language with static memory management (zero-cost abstractions) and no garbage collector. Every parse, resolve, and transform operation runs at native speed — 10-100x faster than V8's JavaScript engine for CPU-intensive tasks.

2. Multi-threaded by default: Webpack runs single-threaded on Node.js's event loop. Rspack leverages all CPU cores through Rust's thread pool — module parsing, dependency resolution, and chunk generation all happen in parallel.

3. SWC instead of Babel: Rspack includes a built-in SWC (Speedy Web Compiler) — a Rust-based transpiler that's 20-70x faster than Babel. No need to install babel-loader, @babel/preset-env, or dozens of Babel plugins.

4. Incremental compilation: When you modify a single file, Rspack only rebuilds that module and its direct dependents — not the entire dependency graph like Webpack does.

Real-World Benchmarks: Rspack vs Webpack vs Vite vs Turbopack

* Turbopack's production build (8.2s) includes Next.js-specific compilation and isn't directly comparable. Benchmarked on 800 React components, 140 routes, ~95K LOC TypeScript, M3 MacBook Pro.

Migrating from Webpack to Rspack in 6 Steps

Step 1 — Install Rspack:

# Remove Webpack
npm uninstall webpack webpack-cli webpack-dev-server

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

Step 2 — Rename config file:

# Rename (or copy)
mv webpack.config.js rspack.config.js

Step 3 — Update imports:

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

// After (rspack.config.js)
const rspack = require('@rspack/core');
// HtmlWebpackPlugin → HtmlRspackPlugin (built-in)
// MiniCssExtractPlugin → CssExtractRspackPlugin (built-in)

Step 4 — Replace equivalent plugins:

// rspack.config.js
const rspack = require('@rspack/core');

module.exports = {
  entry: './src/main.js',
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: './public/index.html'
    }),
    new rspack.CssExtractRspackPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.(js|ts)$/,
        use: {
          loader: 'builtin:swc-loader',
          options: {
            jsc: {
              parser: { syntax: 'typescript' }
            }
          }
        }
      }
    ]
  }
};

Step 5 — Switch to SWC loader (recommended):

Replace babel-loader with builtin:swc-loader built into Rspack. This step is optional (Rspack still supports babel-loader), but it gives an additional 30-50% build speed improvement.

Step 6 — Update package.json scripts:

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

Configuring Rspack for Vue.js Projects

Rspack supports Vue.js through vue-loader — the same loader you've been using with Webpack. No new tools to learn.

// rspack.config.js for Vue 3
const rspack = require('@rspack/core');
const { VueLoaderPlugin } = require('vue-loader');

module.exports = {
  entry: './src/main.ts',
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: { '@': path.resolve(__dirname, 'src') }
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: { experimentalInlineMatchResource: true }
      },
      {
        test: /\.ts$/,
        loader: 'builtin:swc-loader',
        options: {
          jsc: {
            parser: { syntax: 'typescript', tsx: false }
          }
        },
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [rspack.CssExtractRspackPlugin.loader, 'css-loader']
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    new rspack.HtmlRspackPlugin({
      template: './public/index.html'
    }),
    new rspack.CssExtractRspackPlugin(),
    new rspack.DefinePlugin({
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false,
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false
    })
  ]
};

Rsbuild: Zero-Config Option for New Projects

If you're starting a new project and don't want to write config, Rsbuild is a high-level wrapper around Rspack — similar to Vite's relationship with Rollup. Rsbuild provides zero-config support for React, Vue, and Svelte with a simple plugin system.

# Create a Vue project with Rsbuild
npm create rsbuild@latest -- --template vue-ts

# Rsbuild config (rsbuild.config.ts)
import { defineConfig } from '@rsbuild/core';
import { pluginVue } from '@rsbuild/plugin-vue';

export default defineConfig({
  plugins: [pluginVue()],
  source: {
    entry: { index: './src/main.ts' }
  },
  output: {
    assetPrefix: '/assets/'
  }
});

graph LR
    A["New project"] -->|"Zero config"| B["Rsbuild"]
    C["Existing Webpack
needs migration"] -->|"Keep config"| D["Rspack"]
    E["Project needs
ESM dev server"] -->|"Unbundled dev"| F["Vite"]
    B --> G["Rspack Core"]
    D --> G
    style A fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style C fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style E fill:#f8f9fa,stroke:#e0e0e0,color:#2c3e50
    style B fill:#e94560,stroke:#fff,color:#fff
    style D fill:#e94560,stroke:#fff,color:#fff
    style F fill:#2c3e50,stroke:#fff,color:#fff
    style G fill:#16213e,stroke:#fff,color:#fff

Compatible and Incompatible Plugins

Production Build Optimization with Rspack

// rspack.config.js — production optimization
module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
          priority: 10
        },
        vue: {
          test: /[\\/]node_modules[\\/](vue|vue-router|pinia)[\\/]/,
          name: 'vue-core',
          chunks: 'all',
          priority: 20
        }
      }
    }
  },
  experiments: {
    css: true  // Native CSS support — no css-loader needed
  }
};

When to Use Which Tool

Rspack in CI/CD Pipelines

The biggest benefit of Rspack in production isn't local dev — it's CI/CD. When every PR triggers a build, reducing build time from 8 minutes to 90 seconds means:

• Compute savings: Fewer CI minutes = lower AWS/GitHub Actions costs
• Faster feedback loop: Developers don't wait 10 minutes to know if a build succeeded or failed
• More frequent deploys: When builds are fast, teams confidently deploy multiple times per day instead of batching to once at end of day

# .github/workflows/build.yml
name: Build & Deploy
on: [push]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 22 }
      - run: npm ci
      - run: npx rspack build  # ~90s instead of ~8min with Webpack
      - uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/

Conclusion

Rspack isn't a "Webpack killer" — it's a Webpack accelerator. If you have a large Webpack project struggling with build times, Rspack lets you keep your existing knowledge, config, and plugin ecosystem while gaining 20x faster builds thanks to Rust. With Rsbuild for new projects and Rspack for migrations, ByteDance is building a complete build tool ecosystem competing directly with Vite — and each has its own strengths.

References

• Rspack Official Documentation
• Rspack GitHub Repository
• Rsbuild — Rspack-based Build Tool
• Vite vs Turbopack vs Rspack Benchmark 2026
• Mews: Goodbye Webpack, Hello Rspack (80% Faster Builds)
• Rspack vs Webpack Deep Dive 2026