· rspack / webpack / bundler

Rspack vs Webpack — Bundler Rust đã sẵn sàng thay thế chưa?

Rspack 2.0 khởi động dev server nhanh hơn 5–18× và HMR nhanh hơn 31× so với webpack 5. Bundle output gần như giống hệt. Hầu hết các dự án webpack nên chuyển sang.

Bởi

1.818 từ · 10 phút đọc

Nếu webpack của bạn build chậm, hãy chuyển sang Rspack. Dev startup nhanh hơn 5–18×, HMR nhanh hơn 31× ở quy mô lớn, production build nhanh hơn 5–9× — tất cả với config webpack giữ nguyên và bundle output gần như không đổi. Migration mất 1–2 ngày với một app cỡ vừa.

Bài này dành cho ai

Các team đang dùng webpack 5 và mệt mỏi với thời gian build. Nếu bạn đang bắt đầu dự án mới không có lịch sử với webpack, hãy đọc phần kết luận trước — Vite 8 có thể là lựa chọn mặc định tốt hơn.

Chúng tôi đã test gì

Rspack v2.0.6 (phát hành 2026-06-02) vs webpack 5.107.2. Cả hai cấu hình với SWC (không dùng Babel) để so sánh ngang bằng. Dữ liệu benchmark từ rstackjs/build-tools-performance, chạy trên GitHub Actions ngày 2026-06-01. Quy mô app: react-1k (1.000 module), react-5k, react-10k.

Con số thực tế

Chỉ số đáng chú ý nhất là HMR ở quy mô lớn: nhanh hơn 31× với 5.000 module — 105 ms so với 3.314 ms. Với lập trình viên lưu file hàng chục lần mỗi giờ, sự khác biệt đó là ranh giới giữa vòng phản hồi tức thì và việc phải chuyển sang tab trình duyệt để chờ.

Khởi động dev server (không cache)

Quy mô appRspack 2.0.6webpack 5.107Tốc độ
1.000 module1.566 ms9.135 ms5.8×
5.000 module901 ms14.189 ms15.7×
10.000 module1.476 ms26.984 ms18.3×

Hot module replacement

Quy mô appRspack 2.0.6webpack 5.107Tốc độ
1.000 module163 ms736 ms4.5×
5.000 module105 ms3.314 ms31.6×
10.000 module156 ms3.386 ms21.7×

Production build (không cache)

Quy mô appRspack 2.0.6webpack 5.107Tốc độ
1.000 module1.032 ms7.730 ms7.5×
5.000 module2.014 ms14.071 ms7.0×
10.000 module5.219 ms45.436 ms8.7×

Bộ nhớ (dev server RSS)

Quy mô appRspack 2.0.6webpack 5.107Rspack tiết kiệm
1.000 module347 MB822 MB2.4× ít hơn
5.000 module283 MB1.818 MB6.4× ít hơn
10.000 module355 MB1.923 MB5.4× ít hơn

Kích thước bundle

Kích thước bundle gần như giống nhau. Ở react-10k: Rspack xuất ra 5.861 kB so với 5.934 kB của webpack — chênh lệch 1,2%. Kích thước sau gzip chênh nhau 0,1–1% qua tất cả các kịch bản. Bạn không phải đánh đổi chất lượng output để lấy tốc độ build.

Một điểm đáng chú ý về dev startup có cache: webpack 5.107.2 ở react-10k chậm hơn khi dùng cache (27.569 ms) so với không có cache (26.984 ms), cho thấy chi phí invalidation cache tăng lũy tiến theo quy mô.

Khả năng tương thích

Mục tiêu thiết kế của Rspack là thay thế trực tiếp webpack 5. Trên thực tế, hơn 80% trong số 50 webpack plugin phổ biến nhất hoạt động được ngay hoặc có bản thay thế được duy trì tốt.

Dùng được ngay không cần thay đổi

28 plugin thông dụng tương thích hoàn toàn, bao gồm html-webpack-plugin, webpack-bundle-analyzer, terser-webpack-plugin, compression-webpack-plugin, @sentry/webpack-plugin (v1.20.1+), và @loadable/webpack-plugin. Hầu hết các loader đều hoạt động: babel-loader, css-loader, sass-loader, less-loader, vue-loader, svelte-loader.

Tích hợp sẵn (config giữ nguyên)

Một số webpack plugin được tích hợp sẵn trong Rspack — dùng trực tiếp, không cần thay đổi config:

webpackRspack built-in
copy-webpack-pluginrspack.CopyRspackPlugin
mini-css-extract-pluginrspack.CssExtractRspackPlugin
tsconfig-paths-webpack-plugintùy chọn resolve.tsConfig
circular-dependency-pluginCircularDependencyRspackPlugin

Bản thay thế tương đương

Ba plugin phổ biến cần dùng package riêng dành cho Rspack:

webpackRspack thay thế
eslint-webpack-plugineslint-rspack-plugin
fork-ts-checker-webpack-plugints-checker-rspack-plugin
@pmmmwh/react-refresh-webpack-plugin@rspack/plugin-react-refresh

Chưa được hỗ trợ (8 plugin)

@cypress/webpack-preprocessor, critters-webpack-plugin, git-revision-webpack-plugin, webpack-remove-empty-scripts, và bốn plugin khác. Xem danh sách tương thích đầy đủ. Nếu dự án của bạn phụ thuộc vào bất kỳ plugin nào trong số này, migration sẽ cần workaround hoặc chờ đến khi có hỗ trợ.

Module Federation

Rspack hỗ trợ Module Federation ở hai mức. MF 1.5 là bản thay thế trực tiếp cho các webpack app đã dùng federated architecture — cùng API. MF 2.0 (qua @module-federation/enhanced) bổ sung dynamic type hints, Chrome DevTools extension, runtime plugin và preloading. Interop giữa webpack host và Rspack remote được hỗ trợ, cho phép migration monorepo từng bước một.

Migration từ webpack sang Rspack

Các bước cơ bản khá đơn giản:

# 1. Swap packages
npm remove webpack webpack-cli webpack-dev-server
npm install -D @rspack/core @rspack/cli @rspack/dev-server

# 2. Rename config
mv webpack.config.js rspack.config.js

# 3. Update scripts in package.json
#   "build": "webpack"       →  "build": "rspack build"
#   "dev": "webpack serve"   →  "dev": "rspack serve"

# 4. Replace mini-css-extract-plugin with the built-in
#   Remove the import; use rspack.CssExtractRspackPlugin instead

Sau đó, thay babel-loader bằng builtin:swc-loader tích hợp sẵn để tăng thêm 2–4× tốc độ:

// rspack.config.js
{
  test: /\.[jt]sx?$/,
  use: [{
    loader: 'builtin:swc-loader',
    options: { jsc: { parser: { syntax: 'typescript', tsx: true } } }
  }]
}

Lưu ý những điểm dễ gặp vấn đề (tất cả đều xuất hiện trong migration thực tế của Mews, xem bài viết của họ):

  1. Dynamic imports với nhiều string interpolation: SWC không hỗ trợ import(\${dir}/${file}`)` với nhiều interpolation. Cần refactor call site.
  2. Plugin SWC cho Styled Components: Việc căn chỉnh phiên bản swc_core giữa Rspack và SWC plugin của styled-components cần chú ý — pin cả hai và kiểm tra kỹ khi nâng cấp.
  3. Browserslist: Phần triển khai bằng Rust yêu cầu đặt env var BROWSERSLIST_DANGEROUS_EXTEND=true nếu bạn đang extend config giữa các package.
  4. Babel transform tùy chỉnh: Các Babel plugin không có bản tương đương trực tiếp trong Rspack. Cần viết lại thành SWC plugin hoặc standalone transform.

Quy trình triển khai đề xuất: pilot trên một app không quan trọng, kiểm tra output khớp (số liệu kích thước bundle ở trên xác nhận điều này), sau đó triển khai cho phần còn lại. ByteDance dùng Rspack nội bộ cho TikTok, Douyin, Lark và Coze — con đường này đã được đi qua nhiều lần.

Với monorepo, Nx hỗ trợ Rspack ngay từ đầu qua @nx/rspack. Nó xử lý việc kết nối config cho từng app và cho phép bạn migrate từng app một mà không cần đụng đến cấu hình build ở root.

Kết luận

Nên migrate nếu: build webpack của bạn chậm và không có plugin nào trong danh sách chưa được hỗ trợ. Điều này áp dụng cho phần lớn các team. Các benchmark được xác nhận bởi chạy độc lập và các đơn vị triển khai quy mô lớn bao gồm Microsoft, Amazon, Alibaba và Discord. Bundle output tương đương từng byte.

Chờ nếu: dự án của bạn phụ thuộc vào @cypress/webpack-preprocessor, critters-webpack-plugin, hoặc plugin chưa được hỗ trợ khác mà không có lựa chọn thay thế khả thi. Cũng chờ nếu bạn có Babel transform phức tạp không thể viết lại.

Bỏ webpack hoàn toàn nếu: bạn đang bắt đầu dự án mới không có lịch sử với webpack. Rspack là lựa chọn phù hợp nếu bạn cần bề mặt plugin của webpack. Nếu không, Vite 8 (với Rolldown+Oxc) nhanh hơn ở cold build trên benchmark popular-libs — 1.023 ms so với 1.668 ms — và tạo ra bundle nhỏ hơn một chút.

Bundler Rust này đã sẵn sàng cho production. Từ Rspack 2.0 (tháng 4 năm 2026), câu hỏi không còn là liệu nó có hoạt động không — 5 triệu lượt tải mỗi tuần và triển khai ở quy mô doanh nghiệp đã trả lời điều đó. Câu hỏi là liệu danh sách plugin cụ thể của bạn có phù hợp không. Với hầu hết các dự án, câu trả lời là có.

Nếu bạn đang đánh giá toàn bộ hệ sinh thái bundler hiện đại, Turbopack vs Vite phân tích thêm khi nào nên chọn bundler Rust-based và khi nào Vite với Rolldown là lựa chọn phù hợp hơn.

Tóm tắt

Tiêu chíwebpack 5.107Rspack 2.0.6
Cold dev start (10k module)~27s~1.5s (18×)
HMR (5k module)~3.3s~105ms (31×)
Prod build (10k module)~45s~5.2s (8.7×)
Dev memory (10k module)~1.9 GB~355 MB (5.4×)
Kích thước bundle✅ (≈ giống hệt)
Tương thích configNative~85% thay thế trực tiếp
Hỗ trợ top-50 pluginNative>80% (native/thay thế)
Module FederationMF 1.xMF 1.5 + 2.0
npm downloads/week>30M~5M

Lưu ý

Benchmark của Rspack v2.0.6 được chạy với Rspack 2.0.5 (kém một patch) — repo benchmark chưa cập nhật khi dữ liệu được thu thập vào 2026-06-01. Không có sự khác biệt về chức năng giữa 2.0.5 và 2.0.6 ảnh hưởng đến các con số.

Vào tháng 12 năm 2024, các package npm của Rspack bị xâm phạm trong thời gian ngắn với malware đào tiền mã hóa (The Hacker News). Sự cố được xử lý trong vài giờ. Tất cả các bản phát hành v1.1+ đều sạch. Với môi trường triển khai nhạy cảm về bảo mật, hãy pin phiên bản và xác minh checksum trong CI.

So sánh lượt tải npm giữa webpack (>30 triệu/tuần) và Rspack (~5 triệu/tuần) phản ánh lượng cài đặt tích lũy 15 năm của webpack, không phải xu hướng chuyển đổi hiện tại. Tín hiệu có ý nghĩa hơn: Rspack tăng từ 100k lượt/tuần ở v1.0 (tháng 10 năm 2024) lên 5 triệu lượt/tuần ở v2.0 (tháng 4 năm 2026) — tăng trưởng 50× trong 18 tháng.

Bài viết này không chứa liên kết affiliate.

Tham khảo