Turbopack vs Vite — Cược của Next.js so với lựa chọn phổ biến

Nếu bạn đang dùng Next.js, hãy dùng Turbopack — đây là bundler mặc định từ Next.js 16, tốc độ HMR có thực, và không cần migrate gì thêm. Nếu bạn đang dùng bất kỳ framework nào khác, Vite 8 là lựa chọn tốt hơn: production build nhanh hơn, hỗ trợ plugin rộng hơn, và không bị gắn chặt với một nền tảng hosting duy nhất. Câu hỏi “Vite có nên chuyển sang Turbopack không?” thực ra là một cái bẫy — đó là quyết định chuyển đổi framework, không phải chuyển đổi bundler.

Bài viết này dành cho ai

Các developer đang bắt đầu dự án Next.js mới, hoặc đang dùng Vite (Remix, SvelteKit, Astro, React thuần) và muốn biết Turbopack có đáng xem xét không. Nếu bạn đang maintain một dự án dựa trên Webpack, đó là một bài so sánh khác — lộ trình migrate sang Turbopack từ Webpack có tồn tại nhưng nằm ngoài phạm vi bài này.

Chúng tôi đã test gì

Turbopack: đi kèm với Next.js 16.2.6. Bundler mặc định từ Next.js 16 (tháng 10/2025).
Vite: v8.0.10 (phát hành ngày 12/3/2026), hiện vận hành trên Rolldown (bundler viết bằng Rust, thay thế esbuild/Rollup bên dưới).
Máy test: M3 MacBook Pro.
Dự án test: ứng dụng TypeScript với 800 component, 140 route, ~95k dòng code — đủ lớn để các hiệu ứng “hello world” không che khuất kết quả thực.

Giới thiệu nhanh về hai công cụ

Turbopack là bundler viết bằng Rust của Vercel, được xây dựng riêng cho Next.js. Nó xử lý server components, streaming, và toàn bộ pipeline dev/build của Next.js. Đây không phải bundler đa năng — không có cách nào “thêm Turbopack vào Remix”. Muốn dùng Turbopack, bạn phải dùng Next.js.

Vite là build tool độc lập với framework đã chiếm lĩnh thị trường công cụ phát triển suốt bốn năm qua. Vite 8 thay thế internals kiểu lai esbuild/Rollup bằng Rolldown — một phiên bản Rollup viết lại bằng Rust — giúp xử lý vấn đề config-split giữa dev và production, đồng thời mang lại tốc độ build nhanh hơn đáng kể cho các dự án lớn.

Cả hai đều dùng Rust native compilation làm chiến lược hiệu năng cốt lõi. Cả hai đều nhanh. Khoảng cách hẹp hơn nhiều so với những gì marketing từ hai phía gợi ý.

Benchmark Turbopack vs Vite

Số liệu từ dự án TypeScript 800 component của chúng tôi trên M3:

Chỉ số	Turbopack (Next.js 16.2.6)	Vite 8 (Rolldown)
Cold dev start	2.1s	2.8s
HMR — deep component	70ms	130ms
Production build	8.2s	4.1s

Ba điều cần lưu ý trước khi bạn chụp màn hình bảng này:

Cold start: 2.1s của Turbopack so với 2.8s của Vite là khoảng cách 25%. Có thực, nhưng không tạo ra khác biệt lớn với một dự án chỉ khởi động một lần mỗi phiên làm việc.

HMR: 70ms so với 130ms là nơi Turbopack thể hiện ưu thế rõ nhất. Những thay đổi trên deep component — loại buộc phải propagate qua 40+ module phụ thuộc — hoàn thành trong chưa đầy một frame trên Turbopack. Với Vite, bạn vượt quá hai frame. Qua hàng trăm lần chỉnh sửa mỗi ngày, con số này cộng lại đáng kể.

Production build: So sánh 8.2s vs 4.1s không hoàn toàn công bằng. Build của Turbopack bao gồm cả RSC server processing, streaming manifest generation, và toàn bộ output pipeline của Next.js. Vite chỉ build một client bundle. Nếu so thuần túy thời gian biên dịch bundle, khoảng cách thực nhỏ hơn — nhưng thời gian thực tế bạn phải chờ mới là điều quan trọng, và Vite 8 thắng 50% trên workload này.

Benchmark chính thức của Vercel cho thấy build nhanh hơn 2–5× và Fast Refresh nhanh hơn tới 10× so với Webpack. Đó là phép so sánh khác. Ưu thế của Turbopack so với Vite về HMR cho deep component là 40–50% — không phải 10×. Hãy dẫn đúng số liệu.

Bản nâng cấp Rolldown của Vite 8 mang lại cải thiện rõ rệt so với Vite 7 trong thực tế. Linear cắt build time từ 46s xuống còn 6s. Beehiiv giảm 64%. Ramp giảm 57%. Đây không phải số liệu Vite vs Turbopack — đây là Vite 8 vs Vite 7. Điểm cần nhớ là Vite không đứng yên.

Hệ sinh thái

Đây là điểm khác biệt lớn nhất giữa hai công cụ.

Turbopack chỉ dành cho Next.js và có một số khoảng trống rõ ràng trong hệ sinh thái plugin Webpack:

Hỗ trợ loader nhưng không hỗ trợ plugin (và plugin phải output JavaScript thuần).
@svgr/webpack không hoạt động. Nếu bạn dùng SVG imports như React component, bạn cần tìm cách thay thế.
sassOptions.functions không được hỗ trợ.
Yarn PnP: không được hỗ trợ.
URL imports: không được hỗ trợ.
Thứ tự CSS khác với Webpack — có thể gây lỗi hiển thị khó phát hiện khi migrate.
Đã có ghi nhận về bundle size tăng trên production. Các báo cáo migrate từ cộng đồng trong thread thảo luận Next.js dao động lớn tùy dự án: một trường hợp thấy shared chunk tăng từ 101 KB lên 223 KB (+122 KB); một trường hợp khác báo cáo tăng +48 KB tổng first-load JS. Vercel đã xác nhận rằng next build báo cáo kích thước JS không chính xác khi dùng Turbopack; số thực chỉ thấy được qua Lighthouse hoặc browser devtools.

Vite có hệ sinh thái plugin trưởng thành, xây dựng trên Vite API. Hầu hết các framework lớn đều có official Vite plugin. Khả năng tương thích plugin từ Vite 7 lên 8 rất cao — Rolldown dùng cùng giao diện plugin. Các framework được hỗ trợ: React, Svelte, SvelteKit, Vue, Nuxt, Astro, Remix, Qwik và nhiều framework khác đều có official integration. RSC không phải lĩnh vực của Vite — đó là tính năng của Next.js, và nếu RSC là lý do tồn tại của bạn, bạn đã ở trên Next.js rồi.

Với production deployment: Vite build ra static assets có thể deploy lên bất kỳ CDN, edge runtime, hay nền tảng nào. Vercel, Netlify, Cloudflare Pages, Railway, Render — tất cả xử lý được Vite output mà không cần cấu hình thêm. Output của Turbopack được Next.js server infrastructure tiêu thụ; Vercel là môi trường deploy tự nhiên, dù Next.js vẫn chạy được trên các nền tảng khác.

Cấu hình

Turbopack được cấu hình trong next.config.js hoặc next.config.ts. Bề mặt cấu hình nhỏ theo thiết kế — Turbopack cố ý ít tùy chọn hơn Webpack. Nếu build của bạn cần custom loader hoặc plugin Webpack cụ thể, hãy kiểm tra danh sách tính năng được hỗ trợ trước khi commit. Một số thứ “tự nhiên hoạt động” trong Webpack chưa có tương đương trong Turbopack hiện tại.

Vite có cấu hình rõ ràng và được tài liệu hóa tốt. vite.config.ts bao gồm build targets, aliases, SSR options, chunk splitting, và cấu hình plugin. Bề mặt cấu hình rộng hơn, nhưng hầu hết dự án chỉ cần chỉnh vài trường. Rolldown trong Vite 8 gần như trong suốt ở tầng config — vite.config.ts hiện tại của bạn sẽ hoạt động mà không cần thay đổi.

Nếu bạn thích tùy chỉnh build tools, Vite cho bạn nhiều không gian hơn. Nếu bạn muốn không phải nghĩ đến nó, defaults của Turbopack trong Next.js là hợp lý.

Migrate

Webpack → Turbopack (các dự án Next.js)

Đây là lộ trình migrate mà Vercel kỳ vọng developer sẽ theo. Từ Next.js 16, Turbopack là mặc định. Nếu bạn không có custom Webpack plugin (chỉ có loader), quá trình migrate là: xóa webpack: (config) => config khỏi next.config.ts, test, xong. Nếu có custom Webpack plugin, hãy kiểm tra từng cái trong danh sách được hỗ trợ. Đặt thêm thời gian để kiểm tra bundle size — size reporter của next build không đáng tin cậy dưới Turbopack; dùng Lighthouse.

Nếu bạn đang cân nhắc giữa Vite và Webpack cho dự án không dùng Next.js, hướng dẫn Vite vs Webpack: khi nào nên migrate của chúng tôi trình bày chi tiết các yếu tố cần xem xét.

Vite → Turbopack

Đây không phải là migrate bundler. Không có đường đi từ dự án Vite sang Turbopack mà không chuyển sang Next.js. Nếu bạn đang dùng Vite + React (thuần), chuyển sang Next.js là quyết định về framework, ảnh hưởng đến routing, data fetching, kiến trúc SSR, và deployment. Bundler bên dưới là hệ quả của quyết định đó.

Nếu bạn đang đánh giá Next.js vì giá trị riêng của nó và Turbopack đi kèm như một phần thưởng — đó là hướng đi hợp lý. Nếu bạn đang nhắm vào Turbopack và muốn giữ nguyên setup hiện tại, hãy dừng lại: điều đó không thực hiện được.

Vite 7 → Vite 8

Đây là bản nâng cấp mà hầu hết người dùng Vite sẽ thực sự thực hiện trong năm 2026. Quá trình chuyển đổi sang Rolldown gần như trong suốt. Vite 8 giữ nguyên API tương thích với Vite 7; hầu hết dự án nâng cấp bằng cách bump version package và chạy build. Khả năng tương thích plugin rất cao. Thành quả là những cải thiện build time đã đề cập ở trên.

Kết luận

Trường hợp sử dụng	Lựa chọn
Dự án Next.js mới	Turbopack — đã bật sẵn, cứ dùng thôi
Next.js + Webpack hiện tại, không có custom plugin	Turbopack — migrate ít rủi ro
Next.js + nhiều Webpack plugin phức tạp	Turbopack với thận trọng — kiểm tra kỹ các điểm bất tương thích trước
React không dùng Next.js (Vite + React Router, v.v.)	Vite 8 — Turbopack không phải lựa chọn
SvelteKit, Astro, Nuxt, Remix	Vite 8 — các framework này chạy Vite; Turbopack không liên quan
Dự án lớn cần tối ưu production build time	Vite 8 — 4.1s vs 8.2s ở quy mô lớn
Vòng phát triển HMR nặng trên Next.js	Turbopack — 70ms vs 130ms cộng dồn qua cả phiên làm việc dài
Cần `@svgr/webpack` hoặc custom Webpack plugin	Webpack / Vite — các giới hạn của Turbopack có liên quan

Tóm lại: Turbopack là lựa chọn đúng cho Next.js. Nó mang lại HMR tốt hơn ở điểm quan trọng nhất, và việc migrate từ Webpack là khả thi nếu bạn không phụ thuộc nhiều vào plugin. Vite 8 là lựa chọn đúng cho mọi thứ còn lại, và bản nâng cấp Rolldown củng cố thêm lợi thế về production build so với Vite 7.

Lựa chọn sai duy nhất là coi Turbopack như một thay thế trực tiếp cho Vite. Nó không phải vậy, và cách nhìn đó khiến nhiều người mất thời gian điều tra không cần thiết.

Lưu ý

Bundle size tăng: các con số về bundle size nêu ở trên đến từ báo cáo cá nhân trong thread thảo luận Next.js. Kết quả dao động đáng kể tùy dự án — cả hai báo cáo đều từ migrate thực tế nhưng chỉ là dữ liệu đơn lẻ. Hãy đo sau khi chuyển đổi, không phải trước.

Báo cáo kích thước next build: Vercel đã xác nhận đây là lỗi khi dùng Turbopack. Kiểm tra Lighthouse hoặc tab Network để xem bundle size thực.

Tiết lộ affiliate: bài viết này chứa affiliate link đến nền tảng Vercel (/go/vercel). Chúng tôi test hoàn toàn độc lập; link không ảnh hưởng đến kết luận.

Phương pháp benchmark: dự án 800 component là một điểm dữ liệu trên một máy. Build time nhạy cảm với cấu trúc dự án, độ sâu import graph, và cache warmth. Thứ tự tương đối (Turbopack HMR nhanh hơn, Vite production build nhanh hơn) nhất quán qua các báo cáo cộng đồng, nhưng số liệu của bạn sẽ khác.