Vite 6: Công Cụ Build JavaScript Tốc Độ Cao Cho Developer

Vite 6 là gì?

Vite 6 là công cụ build (build tool) và dev server thế hệ mới cho frontend JavaScript. Created bởi Evan You (creator of Vue.js), Vite leverages native ES Modules (ESM) trong development để cung cấp Hot Module Replacement (HMR) cực nhanh – dưới 50ms even cho project lớn hàng nghìn module. Ở production, Vite sử dụng Rollup để bundle tối ưu.

Vite 6 (phát hành 2024) mang lại cải tiến lớn về hiệu suất, plugin API stability, và hỗ trợ đa framework tốt hơn bao giờ hết.

Kiến trúc Vite: Tại sao nhanh hơn Webpack?

Development: Native ESM

Webpack bundle toàn bộ code thành single file trước khi dev server chạy. Vite tiếp cận khác: dev server serve source files trực tiếp qua native ESM. Trình duyệt tải module theo yêu cầu (on-demand), chỉ chuyển đổi (transform) module đang được request. Kết quả: thời gian khởi động dev server không phụ thuộc project size.

Production: Rollup

Vite dùng Rollup để bundle production – tree-shaking superior, code splitting automatic, output format đa dạng (ESM, CJS, UMD). Rollup xử lý static analysis tốt hơn Webpack vì ESM là static-by-default.

Minh họa cây dependency Rollup với code splitting và tree-shaking

So sánh trực quan thời gian build Vite vs Webpack trên project 1000+ module

Vite 6 improvements

Dependency pre-bundling được cải thiện: ESM scanner detect dependencies nhanh hơn, caching hiệu quả hơn
HMR performance: HMR chain tối ưu hơn, ít file re-process hơn khi edit
Asset handling: Inline giới hạn tăng (4KB → 8KB default), hỗ trợ WebP, AVIF, SVG as React component
CSS code splitting: Automatic per-component CSS extraction

Setup dự án React/Vue/Svelte với Vite 6

# React
npm create vite@latest my-app -- --template react

# Vue
npm create vite@latest my-app -- --template vue

# Svelte
npm create vite@latest my-app -- --template svelte

# Sau khi tạo
cd my-app && npm install && npm run dev

Vite hỗ trợ TypeScript out-of-the-box, JSX/TSX, Vue SFC, Svelte SFC, Solid, Astro – mọi framework phổ biến.

Cấu hình nâng cao

Configuration file

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    host: true,
    proxy: {
      '/api': 'http://localhost:8080'
    }
  },
  build: {
    outDir: 'dist',
    minify: 'esbuild',
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom']
        }
      }
    }
  }
})

Plugin ecosystem

Plugins chính thức: @vitejs/plugin-react, @vitejs/plugin-vue, @vitejs/plugin-svelte, @vitejs/plugin-legacy (IE11 support). Ecosystem plugins: vite-plugin-svg-sprites, vite-plugin-pwa, vite-plugin-compression, vite-imagetools.

HMR Deep Dive

Vite HMR hoạt động qua custom WebSocket server. Khi file thay đổi:

Vite detect change, transform module cần update
Gửi HMR update qua WebSocket đến browser
Browser import updated module runtime API
Plugin self-accept hoặc propagate update up dependency tree
React Fast Refresh: preserve component state khi HMR

So với Webpack HMR (rebuild bundle → reload chunk), Vite HMR chỉ transform changed file – O(changed files) thay vì O(bundle).

Tối ưu production build

Chunk splitting: Vite auto-split vendor code. manualChunks tùy chỉnh khi cần.
CSS minification: áp dụng bằng default với lightningcss (Vite 6 dùng Oxide/Native binding).
Assets inlining: small assets base64 inline, large assets hash-named separate files.
Legacy build: @vitejs/plugin-legacy auto-generate IE11-compatible bundle.
Analyze bundle: rollup-plugin-visualizer cho biểu đồ treemap dependency.

Vite so với các công cụ khác

Feature	Vite 6	Webpack 5	Turbopack	esbuild
Dev speed	Rất nhanh	Chậm	Nhanh hơn Vite	Nhanh (CLI)
Production	Rollup (tối ưu)	Rollup (tối ưu)	Beta	Không có
HMR	Native ESM	Source mapping	Incremental	Không có
Config	Simple	Complex	Vite-compatible	Simple
Ecosystem	Growing	Mature	Emerging	Narrow

Mẹo dev experience

Dùng vite-aliases hoặc resolve.alias cho import path rút gọn (@/components/...).
vite-tsconfig-paths đọc alias từ tsconfig.json – không cần duplicate config.
dotenv tự động load .env, .env.development, .env.production.
--host để expose dev server cho mobile/other device trên mạng LAN.
Environment variables: VITE_API_URL (prefix VITE_ bắt buộc để expose to client).

Cấu hình môi trường và .env

Vite tích hợp dotenv tự động, load các file theo thứ tự ưu tiên:

.env – mặc định cho mọi môi trường
.env.[mode] – ví dụ .env.development, .env.production, .env.staging
.env.local – ghi đè các file trên, thường dùng cho secrets local
.env.[mode].local – kết hợp mode và local

Chỉ variables có prefix VITE_ được expose vào client-side code để tránh rò rỉ secrets server-side. Ví dụ:

# .env
VITE_API_URL=https://api.example.com
SECRET_KEY=abc123  # không accessible ở client-side

# Trong code
console.log(import.meta.env.VITE_API_URL)  // accessible
console.log(import.meta.env.SECRET_KEY)    // undefined

Testing và debug configuration

Vite hỗ trợ test runner qua Vitest (sử dụng cùng transformer config). Để dùng:

npm install -D vitest
# vitest.config.ts (tự động kế thừa từ vite.config.ts)
import { defineConfig } from 'vitest/config'

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  }
})

Debug build performance với:

vite build --debug: hiển thị timing cho mỗi plugin
rollup-plugin-visualizer: biểu đồ treemap dependency
source-map-explorer: phân tích source map production
Chrome DevTools → Network → Disable cache → reload để test caching real

Di chuyển từ Webpack sang Vite

Migration thường đơn giản vì Vite hỗ trợ hầu hết cấu hình Webpack qua plugin:

Thay webpack.config.js bằng vite.config.ts
Loại bỏ loaders (babel-loader, ts-loader) → Vite xử lý ESBuild/Rollup plugin
Plugins có thể dùng trực tiếp: @vitejs/plugin-react thay vì react-hot-loader/babel-preset-react
Environment variables: đổi process.env.REACT_APP_* thành import.meta.env.VITE_*
Public folder: Vite dùng public/ (trước đây là static/ trong một số dự án)

Một số lưu ý:

Code splitting: Vite dùng dynamic import() tự động, không cần Webpack’s SplitChunksPlugin
CSS modules: Vite hỗ trợ CSS modules out-of-the-box (file.module.css)
SSR: Vite có bản oficjal cho Vue 3 (vite-plugin-ssr), React (via @vinxi/react)

Lỗi thường gặp và cách khắc phục

Module not found: Kiểm tra tên file chính xác (Linux case-sensitive), alias trong vite.config.ts
HMR không hoạt động: Đảm bảo file được watch (trong dự án, không phải symlink đọc-only), backend không phải Docker bind-mounted volume (sử dụng container bind mount)
Production build lỗi: Thử vite build --debug để xem step nào fail, thường là plugin không tương thích với Rollup
CSS missing: Kiểm tra CSS có được import ở đâu đó trong JS/TS, Vite không extract CSS không được reference
404 on refresh: Cấu hình server fallback tới index.html cho SPA routing (Netlify: _redirects, Vercel: rewrites)

Kết luận

Vite 6 là công cụ build frontend không thể thiếu cho development hiện đại. Tốc độ dev server, HMR, và production build quality vượt trội so với Webpack. Đối với dự án mới, Vite là lựa chọn mặc định. Đối với dự án Webpack đang có, migration từng phần có thể áp dụng (Vite hỗ trợ import từ Webpack packages).

Tham khảo thêm: Vite Documentation | Vite GitHub | Rollup