Rspack — Bundler viết bằng Rust thay thế Webpack, build nhanh gấp 20 lần

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

Webpack đã thống trị thế giới bundler JavaScript suốt gần một thập kỷ. Nhưng khi dự án ngày càng lớn — hàng trăm nghìn dòng code, hàng nghìn module — thì thời gian build từ vài giây đã tăng lên vài phút, thậm chí chục phút. Developer mệt mỏi chờ đợi, HMR lag, CI/CD chậm chạp. Rspack ra đời để giải quyết chính xác vấn đề đó: giữ nguyên hệ sinh thái Webpack quen thuộc, nhưng viết lại hoàn toàn bằng Rust để đạt tốc độ nhanh gấp 20 lần.

Rspack là gì?

Rspack (đọc là "R-S-Pack") là bundler JavaScript/TypeScript hiệu năng cao được phát triển bởi ByteDance (công ty mẹ của TikTok). Nó được viết hoàn toàn bằng Rust và thiết kế để tương thích API với Webpack, cho phép các dự án lớn migrate sang mà gần như không cần viết lại config.

Khác với Vite (dùng ESBuild cho dev, Rollup/Rolldown cho production) hay Turbopack (chỉ dùng được trong Next.js), Rspack là bundler đa năng dùng được cho bất kỳ framework nào: React, Vue, Svelte, Angular, hay vanilla JavaScript.

Kiến trúc: Tại sao Rust nhanh hơn 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

Có 4 lý do cốt lõi khiến Rspack nhanh hơn Webpack hàng chục lần:

1. Rust thay vì JavaScript: Rust là ngôn ngữ compiled, quản lý bộ nhớ tĩnh (zero-cost abstractions), không có garbage collector. Mỗi thao tác parse, resolve, transform đều chạy ở tốc độ native — nhanh hơn JavaScript engine V8 từ 10-100 lần cho các tác vụ CPU-intensive.

2. Multi-threaded mặc định: Webpack chạy single-threaded trên event loop Node.js. Rspack tận dụng toàn bộ CPU cores qua Rust's thread pool — parse module song song, resolve dependency song song, generate chunks song song.

3. SWC thay vì Babel: Rspack tích hợp sẵn SWC (Speedy Web Compiler) — trình transpiler viết bằng Rust, nhanh hơn Babel 20-70 lần. Không cần cài thêm babel-loader, @babel/preset-env, hay hàng chục plugin Babel.

4. Incremental compilation: Khi bạn sửa 1 file, Rspack chỉ rebuild module đó và các module phụ thuộc trực tiếp — không rebuild toàn bộ dependency graph như Webpack.

Benchmark thực tế: Rspack vs Webpack vs Vite vs Turbopack

* Turbopack production build (8.2s) bao gồm cả Next.js-specific compilation, không so sánh trực tiếp. Benchmark trên 800 React components, 140 routes, ~95K LOC TypeScript, M3 MacBook Pro.

Migrate từ Webpack sang Rspack trong 6 bước

Bước 1 — Cài đặt Rspack:

# Gỡ Webpack
npm uninstall webpack webpack-cli webpack-dev-server

# Cài Rspack
npm install -D @rspack/core @rspack/cli

Bước 2 — Đổi tên config file:

# Đổi tên (hoặc copy)
mv webpack.config.js rspack.config.js

Bước 3 — Cập nhật import:

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

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

Bước 4 — Thay thế plugin tương đương:

// 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' }
            }
          }
        }
      }
    ]
  }
};

Bước 5 — Chuyển sang SWC loader (khuyến nghị):

Thay babel-loader bằng builtin:swc-loader tích hợp sẵn trong Rspack. Bước này không bắt buộc (Rspack vẫn hỗ trợ babel-loader), nhưng sẽ tăng thêm 30-50% tốc độ build.

Bước 6 — Cập nhật scripts trong package.json:

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

Cấu hình Rspack cho dự án Vue.js

Rspack hỗ trợ Vue.js thông qua vue-loader — cùng loader mà bạn đã dùng với Webpack. Không cần học thêm công cụ mới.

// rspack.config.js cho 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: Lựa chọn zero-config cho dự án mới

Nếu bạn bắt đầu dự án mới và không muốn viết config, Rsbuild là wrapper cấp cao của Rspack — tương tự mối quan hệ giữa Vite và Rollup. Rsbuild cung cấp zero-config cho React, Vue, Svelte với plugin system đơn giản.

# Khởi tạo dự án Vue với Rsbuild
npm create rsbuild@latest -- --template vue-ts

# Cấu hình Rsbuild (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["Dự án mới"] -->|"Zero config"| B["Rsbuild"]
    C["Dự án Webpack
cần migrate"] -->|"Giữ config"| D["Rspack"]
    E["Dự án cần
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

Plugin tương thích và không tương thích

Tối ưu production build với 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  // CSS native support — không cần css-loader
  }
};

So sánh khi nào nên dùng công cụ nào

Rspack trong CI/CD Pipeline

Lợi ích lớn nhất của Rspack trong production không phải ở local dev — mà ở CI/CD. Khi mỗi PR trigger một build, giảm thời gian build từ 8 phút xuống 90 giây có nghĩa là:

• Tiết kiệm compute: Ít phút chạy CI = ít tiền AWS/GitHub Actions
• Feedback loop nhanh hơn: Developer không phải đợi 10 phút để biết build thành công hay thất bại
• Deploy thường xuyên hơn: Khi build nhanh, team tự tin deploy nhiều lần trong ngày thay vì gom lại 1 lần cuối ngày

# .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 thay vì ~8min với Webpack
      - uses: actions/upload-artifact@v4
        with:
          name: dist
          path: dist/

Kết luận

Rspack không phải "Webpack killer" — nó là Webpack accelerator. Nếu bạn đang có dự án Webpack lớn và đau đầu với thời gian build, Rspack cho phép bạn giữ nguyên kiến thức, config, và plugin ecosystem quen thuộc, đồng thời nhận được tốc độ build nhanh gấp 20 lần nhờ Rust. Với Rsbuild cho dự án mới và Rspack cho migrate, ByteDance đang xây dựng một hệ sinh thái build tool hoàn chỉnh cạnh tranh trực tiếp với Vite — và mỗi bên đều có thế mạnh riêng.

Tham khảo

• 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