Vite 7 và Bun 2.0: Build tool siêu tốc độ cho React dev Việt 2026

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

Vite 7 + Bun 2.0: tốc độ đổi cuộc chơi

Mình nhớ lần refactor một dự án React bán hàng trong nước: Webpack warm-up 8-10 phút, HMR chậm hẳn khi chạm 100+ components. Đổi qua Vite + Bun, hot update gần như tức thì. Tại sao vậy?

Vite phục vụ file qua ESM, chỉ build khi cần. Kết quả là cold start nhanh, HMR hầu như không phụ thuộc kích thước codebase.
Bun là runtime + package manager + bundler trong một binary. Cài đặt, chạy lệnh và test nhanh hơn do I/O và parser tối ưu.
Kẹp hai thứ này lại: Bun chạy Vite (bunx vite), Vite build bằng Rollup cho production. Workflow gọn, ít cấu hình.

341978 Bun chạy Vite: ít lớp trung gian, phản hồi nhanh hơn

Ví dụ cấu hình tối thiểu để chạy React trên Vite với Bun:

// package.json
{
  "devDependencies": {
    "vite": "^7.0.0",
    "@vitejs/plugin-react-swc": "^3.0.0"
  },
  "scripts": {
    "dev": "bunx vite",          // chạy dev server
    "build": "bunx vite build",  // build production
    "preview": "bunx vite preview"
  }
}

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 5173,
    strictPort: true
  },
  build: {
    sourcemap: true
  }
});

Điểm cần lưu ý: Bun có thể chạy script npm thường, nhưng dùng bunx giúp gọi binary cục bộ nhanh và sạch hơn. Khi cần SSR hay library build, cân nhắc so sánh bun build và rollup tùy mục tiêu.

Benchmark thực tế: cold start, HMR, build

Mình đo trên một dự án React cỡ trung (router, code-splitting, vài chục components). Bạn có thể tự chạy lại từ repo công khai: Repo demo benchmark React (Vite vs Webpack).

Kết quả tóm tắt trên cùng máy và cùng codebase:

Cold start (chạy dev server lần đầu): nhanh hơn rõ rệt so với Webpack 5.
HMR sau khi sửa 1 component: gần như tức thì ở mức cảm nhận.
Build production: 2.1 giây (Vite 7 Rollup) vs 45 giây (Webpack 5) (Dev.to - saswatapal).
Kích thước bundle sau minify + treeshake: nhỏ hơn một mức đáng chú ý.

341979 Nhìn tổng thể: cold start và HMR mới là điểm ăn tiền

Cách mình đo: xóa cache, chạy lệnh 3 lần lấy trung bình, bật sourcemap để dễ debug. Số đo có thể lệch tùy CPU/SSD và plugin bạn dùng. Với Next.js, câu chuyện khác vì bundler mặc định là Webpack/Turbopack - phần này mình nói ở dưới.

Migrate từ Webpack 5 sang Vite 7 + Bun 2.0 (5 bước)

Mục tiêu: dev nhanh hơn, build sạch hơn, config ít hơn. Làm gọn trong 5 bước sau.

Bước 1 - Tháo Webpack: gỡ webpack, webpack-dev-server, loaders cũ. Giữ lại Babel nếu cần transform đặc thù.
Bước 2 - Cài Vite + plugin React SWC: bun add -d vite @vitejs/plugin-react-swc.
Bước 3 - Đổi scripts sang Bun + Vite (dev/build/preview).
Bước 4 - Map alias, assets, env sang Vite.
Bước 5 - Kiểm tra plugin tương đương (Image, SVGR, analyzer) và sửa import.

341980 Quy trình 5 bước, rõ vai trò từng công cụ

Ví dụ chuyển scripts và alias:

// package.json (sau khi migrate)
{
  "devDependencies": {
    "vite": "^7.0.0",
    "@vitejs/plugin-react-swc": "^3.0.0"
  },
  "scripts": {
    "dev": "bunx vite",
    "build": "bunx vite build",
    "preview": "bunx vite preview"
  }
}

// vite.config.ts - map alias, assets, env
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  },
  assetsInclude: ['**/*.svg'], // thay thế loader SVG cũ
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version)
  }
});

Checklist chi tiết (mapping loader→plugin, env→import.meta.env, tips cho CSS Modules, SVGR, TS path) mình đóng gói sẵn: tải về tại Checklist migrate Webpack → Vite + Bun (.md).

Trade-off: một vài loader Webpack không có plugin tương đương 1-1 trong Vite. Remedy: wrap qua plugin custom hoặc đổi approach (ví dụ dùng SVGR trực tiếp thay vì file-loader).

Next.js: giữ Turbopack/Webpack, tăng tốc bằng Bun

Next.js không chạy trên Vite. Vậy tối ưu thế nào? Dùng Bun để tăng tốc package manager, scripts và test, còn bundler để Next lo.

Thiết lập nhanh:

# tạo app Next.js
bunx create-next-app@latest my-next
cd my-next

# chạy bằng Bun
bun run dev   # thay vì npm run dev
bun run build
bun run start

Một vài mẹo nhỏ:

Dùng Bun cho lint/test: bunx eslint . và bun test (nếu chuyển sang test runner của Bun).
Với monorepo, giữ nodeLinker kiểu pnpm/bun để chia sẻ dependency hiệu quả.
Theo dõi compatibility: native addon Node hoặc middleware tự viết có thể cần polyfill khi chạy bằng Bun runtime.

341981 Next.js vẫn giữ bundler của mình, Bun chỉ “đạp ga” phần còn lại

Trade-off: API Node không chuẩn có thể khác trên Bun, một số package chưa hỗ trợ. Remedy: khóa runtime per-project, bật CI chạy song song Node lẫn Bun để so khớp hành vi trước khi rollout.

Kế hoạch 7 ngày để productivity x3

Giảm thời gian chờ đợi build-dev, tăng vòng lặp feedback. Mình gợi ý plan ngắn hạn, áp dụng ngay tuần này.

Ngày 1-2: dựng branch thử nghiệm, migrate app con nhỏ sang Vite 7 + Bun. Ghi lại cold start, HMR, build trước-sau.
Ngày 3-4: chuẩn hóa scripts, map alias/env, thay loader đặc thù bằng plugin Vite tương đương. Dọn dependency rác.
Ngày 5-7: chạy CI kép (Node và Bun), fix sai khác, rollout theo feature flag. Đo lại số liệu sau 1 tuần thực chiến.

341982 Kế hoạch ngắn ngày giúp bạn tránh big-bang migrate

Takeaway: tăng tốc không chỉ là build nhanh hơn, mà là vòng lặp sửa-chạy-test mượt hơn. Khi HMR phản hồi trong tích tắc, team review UI, fix bug và ship nhanh hơn. Gặp vướng mắc, drop comment.