DEV Community

Review Laptop
Review Laptop

Posted on Originally published at reviewlaptop.vn

Vite hot reload cực nhanh nhưng bundle lớn có đuối hơn Webpack?

#rtx5060 #frontend #vite #webpack

Đang sửa dở component React giữa đêm, bấm Ctrl + S mà trình duyệt xoay vòng mất vài giây là trải nghiệm gây ức chế nhất cho dân frontend. Tình trạng này khá giống hiện tượng drop xung nhịp khi phần cứng quá nhiệt được phân tích chi tiết tại reviewlaptop.vn: thông số trên giấy nhìn rất mượt, nhưng độ trễ giật cục lúc thao tác mới quyết định hiệu suất làm việc thực tế.

Cold build và HMR: Bản chất khác biệt giữa Bundler và ESM

Webpack tiếp cận theo hướng đóng gói toàn bộ đồ thị phụ thuộc (dependency graph) ngay từ đầu. Khi dự án phình to lên hàng nghìn module, cold build của Webpack thường ngốn từ vài chục giây đến cả phút. Mỗi lần lưu file, incremental build vẫn phải compile lại các chunk liên quan, đẩy độ trễ HMR (Hot Module Replacement) lên ngưỡng cả giây và tiêu tốn hàng gigabyte RAM cho tiến trình Node.js.

Ngược lại, Vite tận dụng Native ESM trên trình duyệt kết hợp pre-bundling dependencies bằng esbuild viết bằng Go. Dev server khởi động gần như tức thì vì không cần gom file trước. Khi bạn sửa code, Vite chỉ cập nhật đúng module thay đổi qua HTTP request, giữ HMR latency ổn định ở mức vài mili-giây bất kể quy mô codebase, đồng thời chiếm dụng RAM nền rất thấp.

Tối ưu cấu hình để triệt tiêu độ trễ

Nếu bắt buộc duy trì Webpack cho các dự án legacy phức tạp, bạn nên chuyển sang dùng swc-loader hoặc thread-loader để chia tải qua đa nhân CPU:

// webpack.config.js - tối ưu build speed
module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'swc-loader',
          options: { jsc: { parser: { syntax: 'typescript', tsx: true } } }
        }
      }
    ]
  },
  cache: { type: 'filesystem' }
};
Enter fullscreen mode Exit fullscreen mode

Với Vite, hãy tách nhỏ các thư viện nặng trong khâu đóng gói production:

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

export default defineConfig({
  plugins: [react()],
  build: {
    rollupOptions: {
      output: {
        manualChunks: { vendor: ['react', 'react-dom'] }
      }
    }
  }
});
Enter fullscreen mode Exit fullscreen mode

Đừng nhìn vào tốc độ build production một lần trên CI/CD mà vội kết luận công cụ nào hơn. Hãy chọn Vite nếu ưu tiên trải nghiệm phản hồi tức thì khi code hàng ngày, và chỉ giữ Webpack khi hệ thống plugin nội bộ chưa thể chuyển đổi.

Top comments (0)