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 Ethan
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ô app | Rspack 2.0.6 | webpack 5.107 | Tốc độ |
|---|---|---|---|
| 1.000 module | 1.566 ms | 9.135 ms | 5.8× |
| 5.000 module | 901 ms | 14.189 ms | 15.7× |
| 10.000 module | 1.476 ms | 26.984 ms | 18.3× |
Hot module replacement
| Quy mô app | Rspack 2.0.6 | webpack 5.107 | Tốc độ |
|---|---|---|---|
| 1.000 module | 163 ms | 736 ms | 4.5× |
| 5.000 module | 105 ms | 3.314 ms | 31.6× |
| 10.000 module | 156 ms | 3.386 ms | 21.7× |
Production build (không cache)
| Quy mô app | Rspack 2.0.6 | webpack 5.107 | Tốc độ |
|---|---|---|---|
| 1.000 module | 1.032 ms | 7.730 ms | 7.5× |
| 5.000 module | 2.014 ms | 14.071 ms | 7.0× |
| 10.000 module | 5.219 ms | 45.436 ms | 8.7× |
Bộ nhớ (dev server RSS)
| Quy mô app | Rspack 2.0.6 | webpack 5.107 | Rspack tiết kiệm |
|---|---|---|---|
| 1.000 module | 347 MB | 822 MB | 2.4× ít hơn |
| 5.000 module | 283 MB | 1.818 MB | 6.4× ít hơn |
| 10.000 module | 355 MB | 1.923 MB | 5.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:
| webpack | Rspack built-in |
|---|---|
copy-webpack-plugin | rspack.CopyRspackPlugin |
mini-css-extract-plugin | rspack.CssExtractRspackPlugin |
tsconfig-paths-webpack-plugin | tùy chọn resolve.tsConfig |
circular-dependency-plugin | CircularDependencyRspackPlugin |
Bản thay thế tương đương
Ba plugin phổ biến cần dùng package riêng dành cho Rspack:
| webpack | Rspack thay thế |
|---|---|
eslint-webpack-plugin | eslint-rspack-plugin |
fork-ts-checker-webpack-plugin | ts-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ọ):
- 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. - Plugin SWC cho Styled Components: Việc căn chỉnh phiên bản
swc_coregiữ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. - Browserslist: Phần triển khai bằng Rust yêu cầu đặt env var
BROWSERSLIST_DANGEROUS_EXTEND=truenếu bạn đang extend config giữa các package. - 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.107 | Rspack 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 config | Native | ~85% thay thế trực tiếp |
| Hỗ trợ top-50 plugin | Native | >80% (native/thay thế) |
| Module Federation | MF 1.x | MF 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
- Rspack — Announcing 2.0
- Rspack GitHub Releases — v2.0.6
- rstackjs/build-tools-performance — benchmark data, 2026-06-01
- Rspack Plugin Compatibility Guide
- Rspack Webpack Migration Guide
- Rspack Module Federation Docs
- Mews Engineering — Goodbye Webpack, Hello Rspack
- InfoQ — Rspack 1.0 Released, 23× Faster than Webpack
- The Hacker News — Rspack npm Supply Chain Attack (Dec 2024)
- Rspack — Trusted By (homepage adopters)
- Nx — @nx/rspack
- module-federation.io — Rspack integration