Đang tải...

Ếch Trendy

Cùng chú ếch nhỏ khám phá thế giới Web đầy biến động. Cập nhật trending nhanh như cách ếch đớp mồi! ⌨️🌿


0

Vite 8 + Bun 1.x: Bộ đôi build tool siêu tốc thay đổi workflow React developer Việt

Ếch Trendy
Ếch Trendy

3 tháng trước · 7 phút đọc

Tại sao workflow React của bạn đang chậm hơn mức cần thiết

Mình nhớ hồi dự án cũ, mỗi lần chạy npm run build là đủ thời gian pha cà phê. 46 giây. Không phải dự án lớn - chỉ là một app React thông thường với vài chục component. Vấn đề không phải ở code, mà ở tool chain.

Trong khoảng 2 năm qua, hệ sinh thái JavaScript đã có hai thay đổi đáng chú ý nhất từ trước đến nay:

  • Vite 8 ra mắt với Rolldown - một bundler viết bằng Rust thay thế Rollup
  • Bun 1.x trở thành package manager + runtime thực sự production-ready

Kết hợp hai thứ này lại, build time của Linear (một SaaS khá lớn) giảm từ 46 giây xuống còn 6 giây. Không phải trên máy dev. Là CI/CD thật.

345612 Từ 46s xuống 6s - đây là con số thực tế của Linear sau khi migrate sang Vite 8

Bài này mình sẽ giải thích tại sao con số đó xảy ra, và bạn có thể áp dụng workflow tương tự cho project React của mình như thế nào.


Vite 8 và Rolldown hoạt động như thế nào

Vite 7 dùng Rollup để bundle production. Rollup viết bằng JavaScript - tốt, nhưng JavaScript có giới hạn về tốc độ xử lý I/O và CPU so với ngôn ngữ compiled.

Rolldown là bundler viết lại hoàn toàn bằng Rust, được thiết kế để tương thích với Rollup API. Vite 8 swap Rollup ra, Rolldown vào. Migration risk thấp vì plugin ecosystem cũ vẫn chạy được.

Kết quả benchmark thực tế từ VoidZero (team phát triển Vite):

Dự án Cải thiện build time
Linear 87% (46s → 6s)
Ramp 57%
Beehiiv 64%
Trung bình 1.6x - 7.7x

345613 Rolldown xử lý song song tốt hơn vì Rust không bị GIL hay event loop bottleneck như JS

Ngoài tốc độ, Vite 8 còn bổ sung một số thứ mình thấy hữu ích:

  • tsconfig paths tích hợp sẵn: Không cần thêm vite-tsconfig-paths plugin nữa. Trước đây mình cứ phải nhớ cài cái này mỗi lần setup project mới.
  • emitDecoratorMetadata native: Quan trọng nếu bạn dùng NestJS hoặc Inversify trên frontend (ít gặp nhưng khi gặp thì đau đầu).
  • HTTP2 proxy: Hiệu suất proxy tốt hơn trong môi trường dev.

Migration từ Vite 7 lên 8 thực tế khá mượt. Vite vẫn giữ backward compatibility cho plugin API, nên nếu bạn không dùng gì quá exotic thì npm install vite@latest và test lại là đủ.


Bun 1.x: Package manager thực sự nhanh hơn npm

Bun không phải silver bullet. Nhưng với một việc - cài packages - nó nhanh hơn npm một cách rõ rệt.

Bun dùng JavaScriptCore engine (engine của Safari) thay vì V8 (Node.js). Khởi động nhanh hơn, RAM ít hơn. Ngoài ra Bun viết bằng Zig với native I/O, nên operations như đọc/ghi file và network requests đều nhanh hơn.

Phiên bản hiện tại là Bun 1.3.2 (tính đến tháng 11/2025) với 287 bug fixes (Bun 1.3.2 Release Notes) lỗi được vá và tính năng CPU profiling mới. Bun 2.0 chưa ra - nếu bạn đọc ở đâu đó nói


Setup workflow Bun + Vite 8 cho React project

Workflow mình đang dùng: Bun lo install và scripts, Vite lo dev server và build. Hai tool làm đúng việc của mình.

# Cài Bun (một lần)
curl -fsSL https://bun.sh/install | bash

# Tạo React project mới với Vite template
bun create vite my-app -- --template react-ts
cd my-app

# Install dependencies bằng Bun (nhanh hơn npm)
bun install

# Chạy dev server
bunx vite

# Build production (dùng Rolldown)
bunx vite build

345614 Bun xử lý install, Vite xử lý HMR và build - mỗi tool làm đúng việc của mình

Nếu bạn có project React đang dùng npm + Vite 7:

# 1. Migrate package manager sang Bun
bun install  # Bun tự đọc package.json, tạo bun.lockb

# 2. Nâng Vite lên version 8
bun add vite@latest

# 3. Test build
bunx vite build

Mình đã thử trên 3 project internal khác nhau. Không có project nào cần thay đổi code logic hay config phức tạp. Chủ yếu là Vite 8 có một vài breaking change nhỏ về cách resolve module trong edge case - đọc migration guide là đủ.

Nếu bạn đang học React từ đầu và muốn setup môi trường dev nhanh, khóa Xây Dựng Website với ReactJS có phần hướng dẫn setup project khá chi tiết, bạn có thể dùng làm nền trước khi áp dụng workflow Bun + Vite này.


Khi nào nên migrate, khi nào không nên

Mình sẽ thẳng thắn: không phải project nào cũng cần migrate ngay.

Nên migrate nếu:

  • Build time trên CI/CD hiện tại > 30 giây
  • Team đang bị block bởi slow HMR (hot reload chậm) trong development
  • Project mới hoàn toàn - không có legacy dependency nào

Nên chờ nếu:

  • Project đang dùng webpack vì một số plugin không có equivalent trong Vite ecosystem
  • Deadline gấp - migration dù đơn giản vẫn cần thời gian test
  • Bạn có custom Rollup plugin phức tạp chưa chắc tương thích Rolldown 100%

345615 Quyết định migrate dựa trên pain point thực tế, không phải trend

Một điểm cần lưu ý: Bun và Node.js không hoàn toàn compatible. Một số package dùng Node.js-specific API có thể gặp vấn đề khi chạy bằng Bun runtime. Tuy nhiên nếu bạn chỉ dùng Bun làm package manager (thay npm) và vẫn dùng Node.js để chạy scripts, risk này gần như bằng 0.

Thực ra đây là cách an toàn nhất để bắt đầu: dùng bun install thay npm install trước. Nếu mọi thứ vẫn chạy bình thường (gần như chắc chắn), bạn đã tiết kiệm được thời gian install mà không cần thay đổi gì khác.

Rồi sau đó nâng Vite lên 8. Từng bước nhỏ, ít rủi ro.

Bạn muốn tải checklist migration để không bỏ sót bước nào? Tải checklist migration Vite 8 + Bun


Workflow 2026: Không chờ Bun 2.0

Bun 2.0 chưa có - và thực ra bạn không cần chờ. Bun 1.3.2 đã production-ready.

Workflow mình đề xuất cho React developer Việt năm 2026:

  1. Dùng bun install thay npm install - làm ngay hôm nay, không có rủi ro
  2. Nâng Vite lên 8 - đọc migration guide, test kỹ, merge vào main
  3. Đo lại build time trên CI/CD sau khi migrate - bạn sẽ thấy số liệu cụ thể

Kết quả thực tế từ các team đã migrate:

  • Linear: 87% giảm build time
  • Beehiiv: 64% giảm build time
  • Ramp: 57% giảm build time

Con số của bạn sẽ khác tùy theo project, nhưng hướng đi là như nhau.

345616 Setup một lần, tiết kiệm thời gian mỗi ngày - ROI của migration rất cao

Một điều mình thấy thú vị: nhiều developer Việt mình biết vẫn đang dùng Create React App hoặc webpack setup từ 3-4 năm trước. Không phải vì lười, mà vì "đang chạy được" nên không muốn đụng vào. Hiểu được - nhưng với Vite 8 và Bun, migration risk thực sự thấp hơn bạn nghĩ rất nhiều.

Dropdown comment nếu bạn gặp vướng mắc gì trong quá trình setup - mình hoặc anh em trong cộng đồng sẽ support.

Trang web dùng cookie để hoạt động và đo hiệu quả quảng cáo. Xem chính sách bảo mật